replace axios by fetch #13

This commit is contained in:
weeman 2021-09-19 15:55:18 +02:00
parent ebb0783103
commit a13314327c
Signed by: weeman
GPG Key ID: 34F0524D4DA694A1
3 changed files with 92 additions and 72 deletions

19
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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,31 +118,46 @@ 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;