axios 多个API调用时仅运行一次响应拦截器

gupuwyp2  于 2022-11-23  发布在  iOS
关注(0)|答案(2)|浏览(290)

我有一个这样的拦截器

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

一切正常,但如果我在一个React组件上有4个API调用,并且发生了此错误,则相同的代码将运行4次,这意味着我将发送刷新令牌并获取身份验证令牌4次,显然我只希望运行一次

wqsoz72f

wqsoz72f1#

我认为您可以将身份验证请求排队,如下所示:

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

我希望这对你有帮助;)

q43xntqr

q43xntqr2#

您是否考虑过为请求使用节流/防反跳 Package 器?lodash内置了这两种 Package 器。下面是这两种 Package 器的一个很好的示例。虽然使用了下划线,但区别相同。
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(

相关问题