In addition to the initialization configuration, axios should have other useful interceptors, which are divided into request interceptors and response interceptors.
Request interceptor: Some operations are performed before the request is sent, such as adding token to each request body, which makes it very easy to process the request uniformly if it is changed later.
Response interceptor: Some operations are performed after receiving the response, such as jumping to the login page when the server returns to the login status and needs to be logged in again.
Request interceptor can intercept data before request, format:

axios.interceptors.request.use(function (config) {
    //What to do before sending a request
    return config;
}, function (error) {
    //What to do about request errors
    return Promise.reject(error);
});

After processing in the request interceptor, you need to return the parameter, config, which is the configuration parameter.

Writby: Desert QQ:22969969

The response interceptor performs some operations after receiving the response in the following format:

axios.interceptors.response.use(function (response) {
    //What to do with response data
    return response;
}, function (error) {
    //What to do about response errors
    return Promise.reject(error);
});

When the request interceptor is processed, it needs to return parameter 1, which is the response header.

The interceptor returns an index of the interceptor's internal array, which can be removed by calling the eject(index) of the corresponding interceptor.

let id1 = axios.interceptors.request.use(function(config){        //Add a request interceptor
    console.log(config)
    return config;
},function(err){})
axios.interceptors.request.eject(id1)                             //Remove the request interceptor

let id2 = axios.interceptors.response.use(function(response){     //Add a response interceptor
    console.log(response)
    return response;
},function(err){})
axios.interceptors.response.eject(id2)                            //Remove the response interceptor

Of course, we can add one or more interceptors at the same time, as long as the parameters are returned.

If in the element-ui+vue project, a common scenario is to use scrollbars to automatically set the icons in loading.

Axios executes a utils.extend(instance, context) when it calls createInstance to create an instance at initialization time; the code, which returns the instance after execution, can set up the interceptor through axios.interceptors.

The implementation of interceptors by Axios is managed by. / lib / core / Interceptor Manager module. When we call axios.interceptors.request.use or axios.interceptors.response.use to add interceptors, we execute the use() method on the Interceptor Manager prototype, as follows:

InterceptorManager.prototype.use = function use(fulfilled, rejected) {    //Add a new interceptor  fulfilled:Success function rejected:Failure function
  this.handlers.push({                                                      //Add to this.handlers Inside the array
    fulfilled: fulfilled,
    rejected: rejected
  });
  return this.handlers.length - 1;                                          //Return index
};

It's just a new addition to thishandlers. For removal, the eject() method on the Interceptor Manager prototype is executed, as follows:

InterceptorManager.prototype.eject = function eject(id) {               //Remove an interceptor id:Index of the interceptor
  if (this.handlers[id]) {                                                //If it exists
    this.handlers[id] = null;                                               //Set it to null
  }
};

Simply set the value to null, and then send axios(config) to the server to send requests, before sending updates, the request interceptor will be executed first, and after receiving the data, the response interceptor will be executed, there are welcome messages you do not understand!