запустить ответ перехватчик только один раз когда несколько 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

Вы считали оболочку дроссельной заслонки/debounce для запроса? 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(