Axios interceptor intercepting all Axios requests

Question

I have used an Axios interceptor to intercept my Axios request for login. But it is also being used by other axios requests. Does having an interceptor means it will be used by all axios requests? If yes, how do I only use it for a particular request. In this case, my login request?

  Axios.interceptors.response.use(res => {
          // console.log(`complete response ---> ${JSON.stringify(res)}`)
          // console.log(`This is the login response----> ${JSON.stringify(res.headers)}`)
          const authorization = res.headers.authorization;
          console.log(`Entering login`);
          const bearerToken = authorization.substring(7, authorization.length);
          const userLoginResponse: LoginResponse = {
            httpStatus: res.status,
            token: bearerToken,
            user: {
              .
              .
              .
            }
          }
          this.authParams = {
            .
            .
            .
            .
          }

          //console.log(`This is the userLoginResponse ---->${JSON.stringify(userLoginResponse)}`)
          this.setObject();
          resolve(userLoginResponse)
          return res;
        }, (error) => {
          console.log(`This is the error status ---> ${error.response.status}`)
          if (error.response.status === 401) {
            resolve(error.response);
          }
        })
        await Axios.post(loginAPIURL, params, config);

This is the other axios request:

  const submitAPIURL =
          process.env.REACT_APP_API_ADD_INITIATIVE_URL ||
          "";
          axios.post(submitAPIURL, initiative, config).then(submitRes =>{
            resolve(submitRes.headers)
          }).catch(error => {
            reject(error);
          })       
    });

But the Axios intercpetor of the login Axios request is also called for the above request.

What's with those `resolve()` / `reject()` calls? Looks like you've fallen into the [explicit promise construction anti-pattern](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it) — Phil, Nov 03 '20 at 23:53
Yes, interceptors are middleware that will be called for all requests - either return the request object early if it doesn't match your criteria (i.e. pass-through / do nothing) or if you only wish to transform a specific request, do so in the `then` after `axios.post(...)` — Emissary, Nov 03 '20 at 23:53

score 1 · Accepted Answer · answered Nov 03 '20 at 23:58

Does having an interceptor means it will be used by all axios requests?

Yes

how do I only use it for a particular request?

I would recommend creating separate Axios instances for each usage.

For example

const myAuthenticatedApiClient = axios.create({
  baseURL: process.env.REACT_APP_API_WHATEVER_URL
})

const myOtherApiClient = axios.create({
  baseURL: process.env.REACT_APP_API_ADD_INITIATIVE_URL
})

myAuthenticatedApiClient.interceptors.response.use(res => {
  // whatever
})

myAuthenticatedApiClient.post(...) // will use the interceptor

myOtherApiClient.post("", initiative, config) // no interceptor on this one

You could also use the default axios instance for your non-authenticated requests.

Thanks! This is much better and cleaner than using a condition in the interceptor — Gaurav Thantry, Nov 04 '20 at 01:40

Axios interceptor intercepting all Axios requests

1 Answers1

Linked