Axios Interceptor не перехватывает статусы ошибок при вызове API

Question

Я пытаюсь перехватить все ответы 401 и затем перенаправить их на другую страницу.

Это то, что я сделал для экземпляра

const instance = axios.create({
  baseURL: "https://api.example.com/",
  withCredentials: true
});

// Add a response interceptor
instance.interceptors.response.use(
  function(response) {
    return response;
  },
  function(error) {
    if (401 === error.response.status) {
        console.log('intercepted');
        window.location = "/login";
    } else {
      return Promise.reject(error);
    }
  }
);

export default instance;

И в моем файле служб APIЯ звоню Axios, используя экземпляр.

import axiosInstance from "../utils/axiosInstance";
const response = await axiosInstance.post("/player/new", bodyFormData);

Этот API вернет 401, однако перехватчик не ловит его, и я вижу неудавшийся запрос в инструментах сетевого разработчика.

Answer 1

Вы должны добавить перехватчик к вашей оси instance вместо axios, как указано в документации :

instance.interceptors.response.use(
  function(response) {
    return response;
  },
  function(error) {
    if (401 === error.response.status) {
        console.log('intercepted');
        window.location = "/login";
    } else {
      return Promise.reject(error);
    }
  }
);