React全局配置Loader：能否在Axios拦截器中实现请求加载效果？

实现思路 #

借助Axios的请求拦截器在发起请求时触发Loader显示，通过**响应拦截器（含成功/失败回调）**在请求结束后关闭Loader。同时加入请求计数器，解决多并发请求时Loader重复显示或提前隐藏的问题。

具体实现步骤 #

1. 定义Loader控制逻辑
   用全局计数器管理请求数量，确保只有第一个请求触发Loader显示，最后一个请求结束才隐藏Loader：

   // 全局请求计数器，处理并发场景
   let requestCount = 0;
   
   // 显示Loader的方法，替换成你项目中实际的Loader触发逻辑
   function showLoader() {
     requestCount++;
     if (requestCount === 1) {
       // 示例：操作DOM显示Loader，框架项目可改用状态管理（如React useState/Vue响应式变量）
       document.getElementById('global-loader').style.display = 'flex';
     }
   }
   
   // 隐藏Loader的方法
   function hideLoader() {
     requestCount--;
     if (requestCount === 0) {
       document.getElementById('global-loader').style.display = 'none';
     }
   }
   

2. 修改Axios实例拦截器
   在原有授权逻辑基础上，嵌入Loader的触发与关闭逻辑：

   import axios from 'axios';
   
   let requestCount = 0;
   
   function showLoader() {
     requestCount++;
     if (requestCount === 1) {
       document.getElementById('global-loader').style.display = 'flex';
     }
   }
   
   function hideLoader() {
     requestCount--;
     if (requestCount === 0) {
       document.getElementById('global-loader').style.display = 'none';
     }
   }
   
   const axiosInstance = axios.create();
   
   // 请求拦截器：注入授权头 + 显示Loader
   axiosInstance.interceptors.request.use(
     (config) => {
       const token = localStorage.getItem('token');
       config.headers.Authorization = `Bearer ${token}`;
       // 可添加跳过Loader的配置项，满足特殊请求需求
       if (!config.skipLoader) {
         showLoader();
       }
       return config;
     },
     (error) => {
       hideLoader(); // 请求出错也要关闭Loader，避免卡死
       return Promise.reject(error);
     }
   );
   
   // 响应拦截器：请求结束后关闭Loader
   axiosInstance.interceptors.response.use(
     (response) => {
       if (!response.config.skipLoader) {
         hideLoader();
       }
       return response;
     },
     (error) => {
       if (!error.config.skipLoader) {
         hideLoader();
       }
       return Promise.reject(error);
     }
   );
   
   export default axiosInstance;
   

3. 补充说明

   • 框架项目（React/Vue等）建议用对应框架的状态管理替代DOM操作，比如React中用useState绑定Loader组件的显示状态，Vue中用响应式变量控制组件v-show。
   • 若存在请求取消场景（如用axios.CancelToken），需在取消回调中调用hideLoader，避免计数器异常。
   • 特殊请求可通过添加skipLoader: true配置跳过Loader，示例：

     // 该请求不会触发Loader
     axiosInstance.get('/api/ignore-loader', { skipLoader: true });
     

内容的提问来源于stack exchange，提问作者Sai Krishna