在继续之前等待API调用返回

问题描述：

我在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()尚未完成？在继续之前等待API调用返回

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

}

答

这看起来像承诺链/结构的问题。拨打this.loaded拨打电话auth.refreshToken已完成后，您应该使refreshToken方法返回承诺。具体来说，它应该返回axios.post呼叫。那axios.post调用，成功时实际上是在执行这一行return response.data.access_token;并解析令牌。现在，当你拨打电话到auth.refreshToken你应该附加一个then块，像这样：

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

不同步的方式构建这个代码，你会得到多次调用this.loaded，因为每个人都会以失败陈旧的令牌......或者至少是一个未定义的令牌。

在继续之前等待API调用返回

相关推荐