Показать модал от ax ios перехватчик ответа. реагировать

Question

У меня небольшой проект, в котором я использую React без Redux или Router. Также я использую ax ios для каждого запроса.

Что мне нужно сделать, так это то, что в случае, если любой ответ имеет код ошибки 401, мне нужно показать какой-то мод с соответствующим сообщением об ошибке.

Я создал экземпляр ax ios и установил там перехватчик ответа:

const axiosInstance = axios.create({
  baseURL: URL_PREFIX,
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
  },
})

axiosInstance.interceptors.response.use(
  response => response,
  error => {
    if(error.response.status === 401) {
      // I want to show modal from here, 
      // but this is outside of my component tree
      // and I can not access my modal state to set it open.
    }
    return error
  }
)

Затем я использую свой созданный экземпляр ax ios для каждого вызова API.

Я также пытался установить перехватчик ответа из моего root компонента useEffect (). Но это не работает

Есть ли какой-нибудь хороший способ сделать это sh без использования Redux или Router?

Answer 1

Вы можете использовать ax ios .catch () метод:

axios.get('url')
  .then(response => // response.data )

  .catch((error) => {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.status);
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

---

Обновление:

Создать экземпляр module :

// axiosInstance.js
import axios from "axios"

const axiosInstance = axios.create({
  baseURL: "url"
})

// You can do the same with `request interceptor`
axiosInstance.interceptors.response.use(
  response => {
    // intercept response...
    return response
  },
  error => {
    // intercept errors
    return Promise.reject(error)
  }
)
// You can create/export more then one
export { axiosInstance }

Затем импортирует его в ваш компонент:

import { axiosInstance } from "./axiosInstance"

const SomeComponent = () => {
  // You may want to use state to store the returned values ...

  useEffect(() => {
    // Call the instance
    axiosInstance.get().then(res => {
      if (res.status === 200) {
        // Everything is OK

        // Else, check if the error object is exist
      } else if (res.response) {
        // Error object: `res.response`
        // For error codes: `res.response.status`
        if(res.response.status === 401) {
          // Do your stuff
        }
      }
    })
  }, [])

  return ( ... )
}