How to display the "loading" status globally in the react axios interceptor

tried to use Toast, in antd-mobile, but mine is on the web side of PC, and the effect is not loaded.

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);
});
Jun.27,2021
For global loading in

interceptor, you need to consider a problem, that is, a page may have a lot of interface requests. If you write like this, it will cause loading flicker or loading ends after an interface is completed, so you need to set a global variable to count the number of interfaces. When all the interfaces are returned, the loading disappears


this should not be placed in the axios interceptor. You should use Promise.all


under componentDidMount. Has this problem been solved? Seek the same

Menu