replace axios by fetch #13

package-lock.json

@@ -13,7 +13,6 @@
         "@vue/cli-plugin-router": "~4.5.0",
         "@vue/cli-service": "~4.5.0",
         "@vue/compiler-sfc": "^3.0.0",
-        "axios": "^0.21.1",
         "babel-eslint": "^10.1.0",
         "bootstrap": "^5.0.1",
         "core-js": "^3.6.5",
@@ -2587,15 +2586,6 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
-    "node_modules/axios": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
-      "dev": true,
-      "dependencies": {
-        "follow-redirects": "^1.10.0"
-      }
-    },
     "node_modules/babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",
@@ -16912,15 +16902,6 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
-    "axios": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
-      "dev": true,
-      "requires": {
-        "follow-redirects": "^1.10.0"
-      }
-    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",

package.json

@@ -12,7 +12,6 @@
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
-    "axios": "^0.21.1",
     "babel-eslint": "^10.1.0",
     "bootstrap": "^5.0.1",
     "core-js": "^3.6.5",

src/mixins/request.mixin.js

@@ -2,29 +2,33 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-import axios from "axios";
-
 export default {
   methods: {
     async submitLogin() {
       this.showErrorMessage = false;
       try {
-        const loginResult = await axios.post(
+        const data = JSON.stringify({
-          `${this.apiUrl}/users/login`,
+          username: this.username,
-          {
+          password: this.password,
-            username: this.username,
+        })
-            password: this.password,
+
-          }
+        const response = await fetch(`${this.apiUrl}/users/login`, {
-        );
+          method: 'POST',
-        if (loginResult.status === 200) {
+          headers: {
-          this.showErrorMessage = false;
+            'Content-Type': 'application/json',
-          //success login
+          },
-          localStorage.setItem("token", loginResult.data.token);
+          body: data
-          localStorage.setItem("user_id", loginResult.data.user_id);
+        })
-          this.$router.push({ path: "/s/search" });
+
-        } else {
+        if (!response.ok) {
-          this.showErrorMessage = true;
+          this.showErrorMessage = true
+          return
         }
+
+        const responseData = await response.json()
+        localStorage.setItem('token', responseData.token);
+        localStorage.setItem('user_id', responseData.user_id);
+        this.$router.push({ path: '/s/search' });
       } catch (error) {
         console.error(error);
         this.showErrorMessage = true;
@@ -32,23 +36,28 @@ export default {
     },
     async search() {
       try {
-        const request = await axios.get(
+        const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, {
-          `${this.apiUrl}/${this.type}s?search=${this.searchText}`,
-          {
             headers: {
               Authorization: `Bearer ${localStorage.getItem("token")}`,
             },
           }
         );
-        if (request.status === 200) {
+
-          this.searchResults = request.data[`${this.type}s`];
+        if (!response.ok) {
-          if (
+          console.error();
-            !this.values
+          this.showErrorMessage = true;
-              .map((item) => item[this.type].name.toLowerCase())
+          return
-              .includes(this.searchText.toLowerCase())
+        }
-          ) {
+
-            this.searchResults.unshift({ name: this.searchText });
+        const responseData = await response.json()
-          }
+        this.searchResults = responseData[`${this.type}s`];
+
+        if (
+          !this.values
+          .map((item) => item[this.type].name.toLowerCase())
+          .includes(this.searchText.toLowerCase())
+        ) {
+          this.searchResults.unshift({ name: this.searchText });
         }
       } catch (error) {
         console.error();
@@ -56,36 +65,52 @@ export default {
       }
     },
     async initEditPage() {
+      const userId = localStorage.getItem('user_id')
+      const url = `${this.apiUrl}/users/${userId}/profile`
+
       try {
-        const userProfile = await axios.get(
+        const response = await fetch(url, {
-          `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
+            headers: { 
-          {
+              Authorization: `Bearer ${localStorage.getItem("token")}` 
-            headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+            },
           }
         );
-        this.profile = userProfile.data.profile;
+
+        if (!response.ok) {
+          return
+        }
+
+        const responseData = await response.json()
+        
+        this.profile = responseData.profile;
       } catch (error) {
         console.error(error);
       }
     },
     async submitFormEdit() {
+      this.showErrorMessage = false
+      this.showSuccessMessage = false
+
       try {
-        const formSubmitResult = await axios.post(
+        const body = JSON.stringify(this.profile)
+        const response = await fetch(
           `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
-          this.profile,
           {
+            method: 'POST',
             headers: {
               Authorization: `Bearer ${localStorage.getItem("token")}`,
+              'Content-Type': 'application/json',
             },
+            body
           }
         );
-        if (formSubmitResult.status === 200) {
+
-          // success
+        if (!response.ok) {
-          this.showSuccessMessage = true;
+          this.showErrorMessage = true
-        } else {
+          return
-          // failure
-          this.showErrorMessage = true;
         }
+        
+        this.showSuccessMessage = true
       } catch (error) {
         console.error(error);
         this.showErrorMessage = true;
@@ -93,35 +118,50 @@ export default {
     },
     async initViewPage() {
       try {
-        const userProfile = await axios.get(
+        const response = await fetch(`${this.apiUrl}/users/${this.$route.params.memberId}/profile`, {
-          `${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
-          {
             headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
           }
         );
-        this.profile = userProfile.data.profile;
+
+        if (!response.ok) {
+          return
+        }
+
+        const responseData = await response.json()
+        this.profile = responseData.profile;
       } catch (error) {
         console.error(error);
       }
     },
     async submitSearch() {
       this.showErrorMessage = false;
+
       try {
-        let url = `${this.apiUrl}/users/profiles`;
+        const url = new URL(`${this.apiUrl}/users/profiles`)
+
         if (this.searchText != "") {
-          url += `?nickname=${this.searchText}`;
+          url.searchParams.append('nickname', this.searchText)
         }
-        const result = await axios.get(url, {
+
+        const response = await fetch(url, {
           headers: {
             Authorization: `Bearer ${localStorage.getItem("token")}`,
           },
         });
-        this.searchResults = result.data.profiles;
+
-        this.searchTotal = result.data.total;
+        if (!response.ok) {
+          this.showErrorMessage = true
+          return
+        }
+
+        const responseData = await response.json()
+
+        this.searchResults = responseData.profiles;
+        this.searchTotal = responseData.total;
       } catch (error) {
         console.error(error);
         this.showErrorMessage = true;
       }
     },
   },
-}
+}