Есть ли способ установить глобальную конфигурацию axios для кодов ответа на ошибку

Я использую axios в моем приложении react/redux и когда я получаю ошибки, такие как 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 блок, я не хочу иметь дело с 401, 404 и т. д. Каждый раз. Поэтому мне нужно иметь возможность иметь дело с ними в более глобальном масштабе, но по-прежнему иметь возможность обрабатывать конкретные ошибки запроса, такие как ошибки проверки на стороне сервера, например.

8
axios react-redux reactjs redux

2 ответов

можно попробовать написать функцию, которая принимает функцию и возвращает функцию с вложенным поймать. Вы даже можете передать дополнительный дополнительный аргумент для выполнения локальной логики catch.

Это может быть перемещено в один файл, и вы всегда можете изменить его там.

export function fetchBrand(id) {
  return function (dispatch) {
    wrapCatch(
      fetchData(`brands/${id}`)
        .then(response => {
          dispatch({
            type: FETCH_BRAND_SUCCESS,
            payload: response
          });
        }),
      function (err) {
        // deal with errors
      }
    );
  }
}
  
export function wrapCatch(f, localErrors) {
  return f.catch(err => {
      // deal with errors
      localErrors();
  });
}

надеюсь, что это помогает.

1

перехватчики ответов можно использовать в качестве документов в документации axios.

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

другой поток с тем же обсуждением

16