🔨 Replaces native fetch with axios

web/pages/index.vue

@@ -86,6 +86,8 @@
 </template>
 
 <script lang="ts" setup>
+import axios from "axios"
+
 const token = useToken()
 
 const open = ref(true)
@@ -96,21 +98,25 @@ const toast = useToast()
 
 async function toggleLock() {
     const desired = !locked.value
-    await $fetch(useAPI("/lock"), {
-        method: "POST",
-        headers: useHeaders(),
-        body: {
-            locked: desired,
-        },
-        onRequestError: handleRequestError,
-        onResponse: handleResponse(() => {
-            toast.add({
-                title: `The door was ${desired ? "locked" : "unlocked"}`,
-                color: "success",
+    axios
+        .post(
+            useAPI("/lock"),
+            {
+                locked: desired,
+            },
+            {
+                headers: useHeaders(),
+            }
+        )
+        .then((res) => {
+            handleResponse(res, () => {
+                toast.add({
+                    title: `The door was ${desired ? "locked" : "unlocked"}`,
+                })
+                locked.value = desired
             })
-            locked.value = desired
-        }),
-    })
+        })
+        .catch(handleRequestError)
 }
 
 onMounted(() => {
@@ -118,13 +124,15 @@ onMounted(() => {
         return navigateTo("/token")
     }
 
-    $fetch(useAPI("/lock"), {
-        method: "GET",
-        headers: useHeaders(),
-        onRequestError: handleRequestError,
-        onResponse: handleResponse(async (response) => {
-            console.log("god: ", await response.json())
-        }),
-    })
+    axios
+        .get<boolean>(useAPI("/lock"), {
+            headers: useHeaders(),
+        })
+        .then((res) => {
+            handleResponse(res, (response) => {
+                locked.value = response.data
+            })
+        })
+        .catch(handleRequestError)
 })
 </script>

web/pages/token.vue

@@ -22,6 +22,7 @@
 <script lang="ts" setup>
 import * as v from "valibot"
 import type { FormSubmitEvent } from "@nuxt/ui"
+import axios from "axios"
 
 const token = useToken()
 
@@ -35,20 +36,20 @@ const state = reactive({
 })
 const toast = useToast()
 
-async function onSubmit(event: FormSubmitEvent<Schema>) {
+function onSubmit(event: FormSubmitEvent<Schema>) {
     const received = event.data.token
-    await $fetch(useAPI("/open"), {
-        method: "GET",
-        headers: {
-            Authorization: `Bearer ${received}`,
-        },
-        onRequestError: handleRequestError,
-        onResponse: handleResponse(() => {
-            toast.add({ title: "Token saved", color: "success" })
-            token.value = received
-            navigateTo("/")
-        }),
-    })
+    axios
+        .get<boolean>(useAPI("/open"), {
+            headers: useHeaders(received),
+        })
+        .then((res) => {
+            handleResponse(res, () => {
+                toast.add({ title: "Token saved", color: "success" })
+                token.value = received
+                navigateTo("/")
+            })
+        })
+        .catch(handleRequestError)
 }
 
 onMounted(() => {