async/await handles promises
The request function reqLogin(user)
returns a promise object, if we want to get the value PromiseResult of the promise object, we need to use async/await.
Because this request function may return three values 1, success status 2, failure status 3, request failure: AxiosError .
(In some requests, the success state is divided into task failure or task success, which is distinguished by result.code)
Full function template:
async login(context,user) {
try {
let result = await reqLogin(user);
if(result.code == 200) {
// result为 成功态的值 并且任务完成
} else if(result.code == 207) {
// result为 成功态的值 并且任务失败
} else {
// 发送请求失败 result 为一个 AxiosError
}
} catch (error) {
// error 为失败态的值
console.log(error);
}
},
Simplified function template:
async logout() {
let result = await reqLogout();
if(result.code == 200) {
// 当成功态并且 code == 200
......
} else {
// 失败态或请求失败返回 自定义失败态 promise
return Promise.reject(new Error('退出登录失败'));
}
}
// 调用端
async logout() {
try {
await this.$store.dispatch('user/logout');
// 成功态处理
} catch (error) {
// 失败态打印
console.log('退出登录失败');
}
}
6.2.1 Cases about login business
First of all, after sending a login request reqLogin(user)
, what data can be obtained:
// result为 成功态的值 并且任务完成
{
"code": 200,
"message": "成功",
"data": {
"nickName": "185123",
"name": "185123",
"userId": 6036,
"token": ""
},
"ok": true
}
// result为 成功态的值 并且任务失败
{
"code": 207,
"message": "账号不正确",
"data": null,
"ok": false
}
// result 为一个 AxiosError
{
"message": "Request failed with status code 404",
"name": "AxiosError",
......
"status": 404
}
// error 为失败态的值
...
Then it is handled like this in vuex
store/user.js
async login(context,user) {
try {
let result = await reqLogin(user);
// result为 成功态的值 并且任务完成
if(result.code == 200) {
localStorage.setItem('token', result.data.token); // 本地存储 token
return {
message: '登录成功'};
// result为 成功态的值 并且任务失败
} else if(result.code == 207) {
return result; // 里面带有 message
// 发送请求失败 result 为一个 AxiosError
} else {
return {
message: '登录失败'}
}
// error 为失败态的值
} catch (error) {
console.log(error);
return {
message: '登录失败'}
}
},
This function returns a promise directly, and it must be in a successful state, which has the attribute message
The login function of the component calls vuex like this
Simple logic, no regularization
async login() {
if(this.phone && this.password ) {
let result = await this.$store.dispatch('user/login',{
phone: this.phone,
password: this.password,
});
// 打印不同的 result.message
alert(result?.message);
// 登录成功跳转
if(result.code == 200) this.$router.push("/");
} else {
alert('请填写正确信息');
}
}