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('请填写正确信息');
    }
}