javascript - 如何在 React 中集中处理 API 调用的错误(使用 Axios)

Question

我在我的 React 应用程序中使用 Axios 进行后端调用。为了便于管理，我写了一个通用函数，用它来进行后端调用。我需要关于如何集中错误处理以及在 UI 上显示它的最佳方式的建议。

    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

使用 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