如何在react axios拦截器中全局显示“加载中”状态

Question

尝试用了antd-mobile中的Toast，但我这个是PC网页端的，效果并没有加载出来。

import Axios from 'axios'Axios.interceptors.request.use(function (config) {  // 显示“加载中”状态
  const token = window.localStorage.token;  if (token) {
     config.headers.Authorization = `token ${token}`
  }  return config
}, function (error) {  return Promise.reject(error);
});

Axios.interceptors.response.use(function (response) {  // 隐藏“加载中”状态
  return response;
}, function (error) {  return Promise.reject(error);
});

Answer 1

拦截器里面的全局加载，需要考虑一个问题，那就是一个页面可能会有很多接口请求，如果像你这么写会造成loading闪烁或者一个接口完成后就loading结束 , 所以你需要设置一个全局变量统计一个接口数量， 当所有的接口返回的时候loading才消失