From a13314327cd520e0c5c3b66539f5099769eea019 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Sun, 19 Sep 2021 15:55:18 +0200 Subject: [PATCH] replace axios by fetch #13 --- package-lock.json | 19 ----- package.json | 1 - src/mixins/request.mixin.js | 144 +++++++++++++++++++++++------------- 3 files changed, 92 insertions(+), 72 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2205725..4fa14de 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 0d93fa3..2c0f6d9 100644 --- a/package.json +++ b/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", diff --git a/src/mixins/request.mixin.js b/src/mixins/request.mixin.js index a98b420..06c33b0 100644 --- a/src/mixins/request.mixin.js +++ b/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( - `${this.apiUrl}/users/login`, - { - username: this.username, - password: this.password, - } - ); - if (loginResult.status === 200) { - this.showErrorMessage = false; - //success login - localStorage.setItem("token", loginResult.data.token); - localStorage.setItem("user_id", loginResult.data.user_id); - this.$router.push({ path: "/s/search" }); - } else { - this.showErrorMessage = true; + const data = JSON.stringify({ + username: this.username, + password: this.password, + }) + + const response = await fetch(`${this.apiUrl}/users/login`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: data + }) + + if (!response.ok) { + 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( - `${this.apiUrl}/${this.type}s?search=${this.searchText}`, - { + const response = await fetch(`${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 ( - !this.values - .map((item) => item[this.type].name.toLowerCase()) - .includes(this.searchText.toLowerCase()) - ) { - this.searchResults.unshift({ name: this.searchText }); - } + + if (!response.ok) { + console.error(); + this.showErrorMessage = true; + return + } + + 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( - `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`, - { - headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }, + const response = await fetch(url, { + 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 - this.showSuccessMessage = true; - } else { - // failure - this.showErrorMessage = true; + + if (!response.ok) { + this.showErrorMessage = true + return } + + 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( - `${this.apiUrl}/users/${this.$route.params.memberId}/profile`, - { + const response = await fetch(`${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; } }, }, -} \ No newline at end of file +}