我的 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;
}
}
})
}
最佳答案
这看起来像是 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 .
关于javascript - 等待 API 调用返回后再继续,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47612298/