async/await 处理 promis
请求函数 reqLogin(user) 返回一个 promise 对象，如果我们要获取该 promise 对象的值 PromiseResult，我们就需要用到 async/await 。
因为这个请求函数可能返回三个值 1、成功态 2、失败态 3、请求失败：AxiosError 。
（某些请求里面，其中成功态又分为任务失败或者任务成功，用 result.code 区分）
完整功能模板：
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);
}
},
简化功能模板：
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 关于登录业务的案例
首先明确发送完一个登录的请求 reqLogin(user)，可以获取到什么数据：
// 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 为失败态的值
...
那么在 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: '登录失败'}
}
},
这个函数直接返回的是一个 promise，且一定为成功态，里面有属性 message
在组件的登录函数是这样调用 vuex 的
简单逻辑，没有加正则
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('请填写正确信息');
}
}