在vue js中使用await嵌套axios调用答案

【问题标题】：nested axios call with await in vue js在vue js中使用await嵌套axios调用
【发布时间】：2020-03-08 14:25:18
【问题描述】：

我是 async 的新手，我在 vuex 中有一个获取用户信息的操作，我把它放在了 promise 中，我想在 axios 调用块中使用这个方法来等待登录，因为用户信息的数据对于我我的问题是我不能在 then 块中使用 await 并且错误说错误说 await can only be use in async function 这个流程是正确的，正确的方法是什么？

store.js：

actions: {
    loadUserInfo({commit}){
        const headers = {
            'Content-Type': 'application/json',
            // 'Authorization': localStorage.getItem('access_token'),
            'Accept': 'application/json'
        }
        return new Promise(function(resolve, reject) {
            axios.get(process.env.VUE_APP_BASE_URL + process.env.VUE_APP_EDIT_INFO,{headers: headers})
                .then(response => {
                    commit('authenticateUser');
                    commit('setUserInfo', response.data.result);
                    resolve();
                })
                .catch(error => {
                    console.log(error);
                    reject();
                })
        });

    }
},

        async login () {
            let self = this;
            axios.post(process.env.VUE_APP_BASE_URL + process.env.VUE_APP_LOGIN,
                this.loginInfo
            ).
             then(function (response) {
                await this.$store.dispatch('loadUserInfo').then((res)=>{
                    this.$emit('authenticateUser', true);
                    this.$emit('registeredIdentification', self.$store.getters.getUsername)
                    this.$router.push({ name: 'mainBox' })
                });


                localStorage.setItem('access_token', response.data.result.access_token)
                localStorage.setItem('refresh_token', response.data.result.refresh_token)
            })
                .catch(function (error) {
                    // let statusCode = error.response.status;
                    console.log(error);
                });



        }

【问题讨论】：

标签： javascript vue.js ecmascript-6 axios

【解决方案1】：

尝试移动异步声明，使其位于then“内部”：

        async login () {
            ...
            .then(async function (response) {
                await this.$store.dispatch('loadUserInfo').then((res)=>{
            ...
        }

可能不需要将then 与async/await 一起使用：

async login() {
  try {
    const loginUrl = process.env.VUE_APP_BASE_URL + process.env.VUE_APP_LOGIN;
    const { data } = await axios.post(loginUrl, this.loginInfo)
    const { access_token: accessToken, refresh_token: refreshToken } = data.result;
    await this.$store.dispatch('loadUserInfo');
    this.$emit('authenticateUser', true);
    this.$emit('registeredIdentification', this.$store.getters.getUsername)
    this.$router.push({ name: 'mainBox' })
    localStorage.setItem('access_token', accessToken)
    localStorage.setItem('refresh_token', refreshToken)
  } catch (error) {
    console.log(error);
  }
}

【讨论】：