React中Axios全局拦截器未生效，如何实现全局请求预加载器？

你的代码里有几个问题导致拦截器没生效，按下面的步骤改就能解决：

问题分析 #

1. 拦截器注册时机不对：你把拦截器写在导出的请求函数后面，函数执行时拦截器还没注册，所以第一次请求不会触发拦截器逻辑。
2. 拦截器回调没返回必要数据：请求拦截器必须返回config对象（或修改后的config），否则Axios没法继续发送请求；响应拦截器必须返回response（或处理后的响应），不然你的请求函数拿不到返回值。
3. 没处理错误分支：如果请求失败，响应拦截器的错误分支没处理，预加载器会一直停不下来。

正确实现代码 #

建议单独封装Axios实例，统一配置拦截器，这样所有请求都会自动生效：

// 先创建axios实例并配置拦截器
import axios from 'axios';

// 创建自定义axios实例，配置通用参数
const apiClient = axios.create({
  withCredentials: true,
});

// 请求拦截器：发送请求前启动预加载器
apiClient.interceptors.request.use(
  (config) => {
    console.log('start preloader');
    // 必须返回config，否则请求会中断
    return config;
  },
  (error) => {
    // 请求出错也要关闭预加载器
    console.log('stop preloader');
    return Promise.reject(error);
  }
);

// 响应拦截器：收到响应后关闭预加载器
apiClient.interceptors.response.use(
  (response) => {
    console.log('stop preloader');
    // 必须返回response，否则请求函数拿不到数据
    return response;
  },
  (error) => {
    // 请求失败也关闭预加载器
    console.log('stop preloader');
    return Promise.reject(error);
  }
);

// 导出请求函数，使用配置好的apiClient
export default async (searchTerms) => {
  try {
    const url = `${process.env.SERVICE_URL}/get-jayachan-detais`;
    const params = {
      orderInfoRequest: {
        searchType: 'MASTER TRX',
        MasterTrxnId: searchTerms.ordnum
      }
    };
    // Axios会自动将JS对象转为JSON，无需手动stringify
    const response = await apiClient.post(url, params);

    return {
      errors: [],
      response
    };
  } catch (e) {
    return {
      errors: [e]
    };
  }
};

额外说明 #

• 通用配置（比如withCredentials）放在create方法里，不用每次请求重复写。
• 除非后端有特殊要求，否则不用手动JSON.stringify请求参数，Axios会自动处理。
• 拦截器的错误分支必须处理，避免请求失败时预加载器一直处于开启状态。

内容的提问来源于stack exchange，提问作者3gwebtrain