Add interceptor on the copy of axios

Hi, I’m using your lib with nuxt.js and have some issue with interception for copy of axios. I have a following scenario: User can create a post, during creation server can return “phone_required” or “otp_required”. But inside “phone_required” flow I need to intercept “otp_required”.

  const authHandler = error => {...}

  const otpHandler = error => {
    const errorResponse = error.response.data.error;
    if (errorResponse) {
      switch (errorResponse.code) {
        case "phone_required":
        case "phone_not_confirmed":
          console.log("phone flow");
          //showing popup with field where user need to enter his phone number and submit, during submission he will get "otp_required" response
          break;
        case "otp_required":
          console.log("otp flow");
          //showing popup with field for OTP, where user entering OTP from SMS and getting back token, which I need to adapt for retry requests
          break;
        default:
          break;
      }
    }
    return Promise.reject(error);
  }

  createAuthRefreshInterceptor($axios, authHandler, {
    statusCodes: [401]
  });

  createAuthRefreshInterceptor($axios, otpHandler, {
    statusCodes: [422]
  });

  const axiosCopy = $axios.create();

  createAuthRefreshInterceptor(axiosCopy, authHandler, {
    statusCodes: [401]
  });

  createAuthRefreshInterceptor(axiosCopy, otpHandler, {
    statusCodes: [422]
  });

So, inside my main component I’m using $axios (global axios instance) and receiving 422 from server with “phone_required” code, interceptor working fine and I’m getting “phone_required” flow.

In this flow I need to make some update request - if I use $axios - it won’t work because it is paused until I resolve promise of otpHandler, for this purpose I created axiosCopy and injected it globally as well and it is working fine and performing requests.

But in case I’m getting 422 for axiosCopy promise is getting stack somewhere, it is not going to interceptor and it is not going to catch block. If I get error with code 500 for axiosCopy it is going to catch block (because I have interceptor for 422 and 401).

How I can setup interceptor for copy also?

[AlexZd]

As of now (if someone will be looking for same) I did it with simple axios interceptor:

function authHandler(error) {
    return new Promise((resolve, reject) => {
      // Showing login popup
      window.dispatchEvent(
        new CustomEvent("...", { detail: { resolve, reject } })
      );
    })
      .then(() => {
        // Retrying failed request
        return $axios(error.config);
      })
      .catch(() => {
        // Showing initial error if something went wrong during login flow or user closed popup
        return Promise.reject(error);
      });
  }

  $axios.interceptors.response.use(
    response => response,
    error => {
      const statusCode = parseInt(error.response.status);
      switch (statusCode) {
        case 401:
          return authHandler(error);
        case 422:
          return otpHandler(error); //similar to authHandler
        default:
          return Promise.reject(error);
      }
    }
  );

But it does not have a feature of storing requests and retry all of them - it just retry failed requests (but in my case it is enough). And also it has a loop of interception, but in my case there is popup in the refresh login, it will prevent hidden loop 😃

[calluna18]

Awesome, thanks! 🤩 Will try it out! 🙏