Как централизовать обработку ошибок для вызовов API в реакции (с Axios)

Question

Я использую Axios для внутренних вызовов в моем приложении реагирования. Для управляемости я написал общую функцию, использовал ее для выполнения внутренних вызовов. Мне нужно предложение о том, как централизовать обработку ошибок и лучший способ показать ее в пользовательском интерфейсе.

    import Axios from "axios";


    // Backend api calls to :: 
    export default function apiService(requestParams) {
        const accessToken = sessionStorage.getItem("access_token");
        requestParams.headers = {
            'authorization': 'Bearer ' + accessToken,
            'Content-Type': 'application/json'
        };

        return Axios(requestParams);
    }

Answer 1

Как указано выше, вы можете использовать перехватчики или просто настроить клиент по умолчанию:

/**
 * Create an Axios Client with defaults
 */
const client = axios.create({
  baseURL: API.BASEURL,
  headers: {
    Authorization: getAuth(),
    'Access-Control-Max-Age': 1728000,
  },
});

/**
 * Request Wrapper with default success/error actions
 */
const request = (options) => {
  const onSuccess = (response) => options.raw ? response : response.data;
    // console.debug('Request Successful!', response);
    // If options.raw is true, return all response

  const onError = (error) => {
    // console.error('Request Failed:', error.config);

    if (error.response) {
      if (error.response.status === 401) {
        // console.error('Unauthorized');
      } else {
        // Request was made but server responded with something
        // other than 2xx
        // console.error('Status:', error.response.status);
        // console.error('Data:', error.response.data);
        // console.error('Headers:', error.response.headers);
      }
    } else {
      // Something else happened while setting up the request
      // triggered the error
      // console.error('Error Message:', error.message);
    }

    return Promise.reject(error.response || error.message);
  };

  return client(options)
    .then(onSuccess)
    .catch(onError);
};

Answer 2

Использовать перехватчики axios:

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

https://github.com/axios/axios