调用axios请求后台的函数时，如何使请求完成再继续往下执行？

Question

问题描述

axios请求后台封装在一个函数中，用其他函数调用时，因为是异步操作所以总是未执行完后台请求就直接往下执行了，导致取不到正确的数据，请教各位前辈如何解决。vue小白一个，不胜感激。

问题出现的环境背景及自己尝试过哪些方法

尝试使用aysnc和await，如下所示，还是没有成功

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

aysnc checkLogin () {
        if (localStorage.getItem("access_token")){
          //访问后台查看access_token是否合法
          var postData = qs.stringify({
            'access_token': localStorage.getItem("access_token"),
            'refresh_token': localStorage.getItem("refresh_token"),
            'username': localStorage.getItem("username")
          })
          axios({
            method: 'POST',
            url: globalVar.remoteUrl + '/LoginCheck',
            data: postData,
            responseType: 'json',
            headers: {"Content-Type": 'application/x-www-form-urlencoded'}
          }).then((response) => {
            if (response.data.code === 200){
              //允许访问
              this.$toast.success('访问成功')
            }else if(response.data.code === 201){
              // access_token过期，refresh_token未过期
              this.$toast.success('重新生成access_token，且访问成功')
            }else if(response.data.code === 404){
              // access_token与refresh_token均过期
              this.$toast.error("登录信息过期，请重新登录")
              console.log('111')
            }
          })
          }else {
          this.$toast.error("请先登录")
        }
      },
      async Login () {
        await this.checkLogin();
        console.log('222')
      },

你期待的结果是什么？实际看到的错误信息又是什么？

我想是先执行
console.log('111')
后执行
console.log(222)
结果总是反的

Answer 1

你在好好看看async/await咋用的。。改了一下

  checkLogin() {
        if (!localStorage.getItem("access_token")) {
            return Promise.reject();
        }
        //访问后台查看access_token是否合法
        var postData = qs.stringify({
            access_token: localStorage.getItem("access_token"),
            refresh_token: localStorage.getItem("refresh_token"),
            username: localStorage.getItem("username")
        });
        return axios({
            method: "POST",
            url: globalVar.remoteUrl + "/LoginCheck",
            data: postData,
            responseType: "json",
            headers: { "Content-Type": "application/x-www-form-urlencoded" }
        });
    },
    async Login() {
            let response = await this.checkLogin().catch(err=>{
                this.$toast.error("请先登录");
            });
         
            if (response&&response.data.code === 200) {
                //允许访问
                this.$toast.success("访问成功");
            } else if (response&&response.data.code === 201) {
                // access_token过期，refresh_token未过期
                this.$toast.success("重新生成access_token，且访问成功");
            } else if (response&&response.data.code === 404) {
                // access_token与refresh_token均过期
                this.$toast.error("登录信息过期，请重新登录");
                console.log("111");
            }
            console.log("222");
       
    }

Answer 2

用co方便点：

co(function* () {
    let res = yield axios(...)
    console.log(res.data)
    console.log(222);
});

Answer 3

可以这样并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

数组里面写几个都行

Answer 4

这样应该可以

aysnc checkLogin () {
    try {
        ...
        return await axios()
    }
}
        

Answer 5

async function a() {
  await promiseB;
  setTimeout(() => {
    console.log('c done');
  }, 2000);
}

const promiseB = new Promise(function(resolve, reject) {
  setTimeout(() => {
    console.log('b done');
    resolve('done');
  }, 4000);
});

a();

b done
c done

Answer 6

给console.log（2）加一个setTimeout（x x x，0）