reactjs - 有没有办法为错误响应代码设置全局 axios 配置

Question

我在我的react/redux应用程序中使用axios，当我收到401、404等错误时，我当前必须在调用axios时为每个操作函数处理它们。我有一个 axios_config.js，其中使用一些常见的习惯用法包装了 axios 调用。例如:

// need to move this to app config
const BASE_URL = 'http://localhost:8080/api/';

function config() {
  return {
    headers: {'X-Token-Auth': localStorage.getItem('token')}
  }
}

export function fetchData(url) {
  return axios.get(`${BASE_URL}${url}`, config());
};

我遇到的困难是 401、404 等常见错误。目前，我正在这样做:

export function fetchBrands() {
  return function(dispatch) {
    dispatch({type:FETCHING_BRANDS});

    fetchData('brands')
      .then(response => {
        dispatch({
          type: FETCH_BRANDS_SUCCESS,
          payload: response
        });
      })
      .catch(err => {
        // deal with errors
      });
  }
}

但是在 catch block 中，我不想每次都处理 401、404 等。因此，我需要能够在更全局的范围内处理这些错误，但仍然有能力处理请求的特定错误，例如服务器端验证错误。

Answer 1

您可以使用响应拦截器作为 axios documentation 中的文档.

axios.interceptors.response.use(undefined, function (error) {
    if(error.response.status === 401) {
      ipcRenderer.send('response-unauthenticated');
      return Promise.reject(error);
    }
  });

other thread with same discussion