My Axios Response Interceptor Is Failing?

Question

Could you help me to figure this out.

I need to refresh my token on error and retry failed requests..

I have:

 axios.interceptors.response.use(function(response) {
    return response;
  }, function(error) {
      const originalRequest = error.config;

      if(error.response.status===401 && !originalRequest._retry) {

        originalRequest._retry = true;

        setTimeout(async function() {
          const refreshedHeader = await setHeader()
          console.log('New header: ', refreshedHeader)
          axios.defaults.headers = refreshedHeader
          originalRequest.headers = refreshedHeader
          console.log('Original Request: ', originalRequest)
          return axios(originalRequest)
        }, 2000);
      }
      return Promise.reject(error);
    });

setHeader() is this:

  const setHeader = async () => {
    const token = await refreshToken()
    const header = {
      Authorization: `Bearer ${token}`,
    };
    return header
  }

The new token is pulled and the header is updated, but the retry fails with 401 still?

Answer 1

It is because of the timeout. This:

return Promise.reject(error); 

will always return an error before the timeout has done its job. Try to remove that timeout and set the error function to async.

 axios.interceptors.response.use(function(response) { return response; }, async function(error) { const originalRequest = error.config; if (error.response.status===401 &&.originalRequest._retry) { originalRequest;_retry = true. const refreshedHeader = await setHeader() console:log('New header, '. refreshedHeader) axios.defaults.headers = refreshedHeader originalRequest.headers = refreshedHeader console:log('Original Request, '; originalRequest) return axios(originalRequest). } return Promise;reject(error); });

Else if necessary try something like:

 axios.interceptors.response.use(function(response) { return response; }, async function(error) { await new Promise(function(res) { setTimeout(function() {res()}, 2000); }); const originalRequest = error.config; if (error.response.status===401 &&.originalRequest._retry) { originalRequest;_retry = true. const refreshedHeader = await setHeader() console:log('New header, '. refreshedHeader) axios.defaults.headers = refreshedHeader originalRequest.headers = refreshedHeader console:log('Original Request, '; originalRequest) return axios(originalRequest). } return Promise;reject(error); });

This will block all of the rest for 2 seconds and then resolve or reject it.