时间戳

首页 > 解决方案 > 如何在反应中集中 API 调用的错误处理（使用 Axios）

javascript - 如何在反应中集中 API 调用的错误处理（使用 Axios）

问题描述

我在我的反应应用程序中使用 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);
    }

标签： javascriptreactjsaxios

解决方案

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

推荐阅读