在繼續之前等待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; 
     } 
    } 
    })

}

來源

2017-12-02 Jrow

這看起來像承諾鏈/結構的問題。撥打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，因爲每個人都會以失敗陳舊的令牌......或者至少是一個未定義的令牌。

來源

2017-12-02 22:29:08 nschwan94

在繼續之前等待API調用返回

回答

相關問題