Sending request in axios request interceptor doesen't work

Viewed 161

I'm trying to send a request in an Axios request interceptor. I need to wait for that request to finish before sending any other request. (The use case is refreshing an access_token)

The problem is the request never gets sent and throws an undefined exception.

Here is what I'm doing:

Registering an interceptor:

api.interceptors.request.use(handleInterceptRequest);

Using that interceptor to check for an expired token before every request:

async function handleInterceptRequest(config) {
  if(config.url === '/auth/refresh'){
    return false;
  }

  return new Promise(async (resolve, reject) => {
    const token = store.getState().app.token;

    //Check if token has expired:
    if (token && Date.now() / 1000 >= jwtDecode(token).exp) {
      try{
        //Token has expired - trigger method below to send a refresh request and save the new token
        await refreshToken(token);
      } catch(error){
        reject(error); // error is caught here but is undefined
      }
    }
    //Only when everything is finished resolve the requst config and let other requests pass
    resolve(config);
  });
}

async function refreshToken(prevToken) {
  //Trying to send the request (The destructiring is not the issue)
  const { data :  { access_token } } = await api({
    url: '/auth/refresh',
    method: 'post',
    headers: {
      Authorization: `Bearer ${prevToken}`
    }
  });

  //I never get here
  api.defaults.headers.common.Authorization = `Bearer ${access_token}`;
  setItem('token', access_token);
  store.dispatch(setToken(access_token));
  return access_token;
}

The refresh request never gets sent and an exception is thrown. Can anyone tell me why this happens?

I also tried doing something like this instead in the refreshToken function:

This works:


async function refreshToken(prevToken) {
  const data = await new Promise(resolve => {
    setTimeout(() => {
      resolve('foo');
    }, 1000);
  });

  return data;
}

This doesen't work:


async function refreshToken(prevToken) {
  const { data } = await api({
    method: 'post',
    url: 'https://jsonplaceholder.typicode.com/posts',
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    },
    data: {
      title: 'foo',
      body: 'bar',
      userId: 1
    }
  });


  return data;
}

So there is definitely something wrong with this interceptor setup that doesen't let the axios request even start.

Thanks

0 Answers
Related