javascript - 等待 API 调用返回后再继续

Question

我的 JavaScript 能力很弱，但我想我明白出了什么问题。只是不够流利，不知道如何修复它，甚至不知道如何正确编写它。我有一个 VueJS 应用程序，它使用 access_token 向 API 发送请求。当该 access_token 过期时，它会向 API 发送一个 refresh_token 并获取一个新的 access_token。我希望它在过期时重做它正在运行的请求。使用下面的代码我得到奇怪的行为。当它到达 401 时，我可以看到它访问 /token 端点并获取新的 access_token 但是下一次调用 /brewery 正在使用旧的access_token。在对 /brewery 的调用最终使用新的 access_token 并且循环停止之前，这种情况会发生大约 5 次。我的猜测是，当我调用 this.loaded() 时，对 auth.refreshToken() 的调用尚未完成？

loaded(access_token){
        var headers;
        if(access_token)
        {
            headers = { 'Authorization': 'Bearer ' + access_token }
        }
        else
        {
            headers = auth.getAuthHeader();
        }
        axios.get(this.getBaseUrl + '/brewery/', { headers })
             .then((response) => {
                this.breweries = response.data.data.slice(0);                    
             })
             .catch((error) => {                    
                if(error.response.status == 401)
                {
                    console.log("error 401");
                    var new_access_token = auth.refreshToken();
                    this.loaded(new_access_token);
                }
            });
    }

验证类

refreshToken(context) {
var token = 
{
  refresh_token: localStorage.getItem('refresh_token'),
  grant_type: 'refresh_token'
};
token = querystring.stringify(token);
axios.post(LOGIN_URL, token)
  .then((response) => {
    localStorage.removeItem('access_token');
    localStorage.setItem('access_token', response.data.access_token);
    this.checkLoggedIn();
    if(!this.isAdmin())
    {
      context.error = "You are not an admin user";
    }
    return response.data.access_token;
  })
  .catch(function (error) {
    if(error.response){
      if(error.response.status == 400)
      {
        console.log(error.response.data);
        context.error = error.response.data;
      }
    }
  })

}

Answer 1

这看起来像是 promise 链/结构问题。要在对 auth.refreshToken 的调用完成后调用 this.loaded，您应该使 refreshToken 方法返回一个 Promise。具体来说，它应该返回 axios.post 调用。成功时，axios.post 调用实际上是执行此行 return response.data.access_token; 并解析 token 。现在，当您调用 auth.refreshToken 时，您应该附加一个 then block ，如下所示:

auth.refreshToken().then((token) => { this.loaded(token) })

如果不以同步方式构造此代码，您将收到对 this.loaded 的多次调用，因为每个调用都会因过时的 token 而失败......或者至少是未定义的 token .