運行響應攔截只有一次，當多個API調用

Question

我有這樣

axios.interceptors.response.use(undefined, err=> { 
    const error = err.response; 
    console.log(error); 
    if (error.status===401 && error.config && !error.config.__isRetryRequest) { 
     return axios.post(Config.oauthUrl + '/token', 'grant_type=refresh_token&refresh_token='+refreshToken, 
      { headers: { 
      'Authorization': 'Basic ' + btoa(Config.clientId + ':' + Config.clientSecret), 
      'Content-Type': 'application/x-www-form-urlencoded,charset=UTF-8' 
     } 
     }) 
     .then(response => { 
      saveTokens(response.data) 
      error.config.__isRetryRequest = true; 
      return axios(error.config) 
     }) 
     } 
    }) 

而一切的攔截工作，但如果我有這樣的一個我的情況下，4 API調用作出反應組件，而這個錯誤發生相同的代碼將運行4次，這意味着4次我將發送我的刷新令牌並獲得身份驗證令牌，並且我希望只運行一次明顯

Answer 1

我想你可以排隊的認證請求的東西，如：

let authTokenRequest; 

// This function makes a call to get the auth token 
// or it returns the same promise as an in-progress call to get the auth token 
function getAuthToken() { 
    if (!authTokenRequest) { 
    authTokenRequest = makeActualAuthenticationRequest(); 
    authTokenRequest.then(resetAuthTokenRequest, resetAuthTokenRequest); 
    } 

    return authTokenRequest; 
} 

function resetAuthTokenRequest() { 
    authTokenRequest = null; 
} 

，然後在攔截器...

axios.interceptors.response.use(undefined, err => { 
    const error = err.response; 
    if (error.status===401 && error.config && !error.config.__isRetryRequest) { 
    return getAuthToken().then(response => { 
     saveTokens(response.data); 
     error.config.__isRetryRequest = true; 
     return axios(error.config); 
    }); 
    } 
}); 

我希望這可以幫助你;）

Answer 2

您是否考慮過請求的節流/去抖動包裝？ lodash既內置。 這是兩個很好的例子。雖然在下劃線但同樣的區別。

http://jsfiddle.net/missinglink/19e2r2we/

...也許這樣的事情對你的情況？

axios.interceptors.response.use(undefined, err=> { 
    const error = err.response; 
    console.log(error); 
    if (error.status===401 && error.config && !error.config.__isRetryRequest) { 
     return _.debounce(axios.post(Config.oauthUrl + '/token', 'grant_type=refresh_token&refresh_token='+refreshToken, 
      { headers: { 
      'Authorization': 'Basic ' + btoa(Config.clientId + ':' + Config.clientSecret), 
      'Content-Type': 'application/x-www-form-urlencoded,charset=UTF-8' 
     } 
     }) 
     .then(response => { 
      saveTokens(response.data) 
      error.config.__isRetryRequest = true; 
      return axios(error.config) 
     }), 1000) 
     } 
    }) 

雖然可能會更好？ axios.interceptors.response.use(undefined, _.debounce(