在继续之前等待 API 调用 return

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);
                }
            });
    }

授权 class

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 chaining/structure 问题。要在 auth.refreshToken 调用完成后调用 this.loaded，您应该使 refreshToken 方法 return 成为一个承诺。具体来说，它应该 return 调用 axios.post。 axios.post 调用成功时实际上是执行此行 return response.data.access_token; 并解析令牌。现在，当您调用 auth.refreshToken 时，您应该附加一个 then 块，如下所示：

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

如果不以同步方式构建此代码，您将获得对 this.loaded 的多次调用，因为每个调用都会失败并返回一个过时的标记……或者至少是一个未定义的标记。

在继续之前等待 API 调用 return

Wait for API call return before proceeding

javascript

axios

vuejs2