This is the fourth day of my participation in the August More text Challenge. For details, see:August is more challenging

One, interceptor

Axios has two types of interception: request interception and response interception. Both intercepts have both success and failure states.

In particular, the request/response must be returned after interception, otherwise the server/browser will not receive the request.

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

    // Add a response interceptor
axios.interceptors.response.use(function (response) {
    // What to do with the response data
    return response;
    }, function (error) {
    // Do something about the response error
    return Promise.reject(error);
});
Copy the code

In addition to Axios, we can also add interceptors to the newly created instance.

The request interceptor executes before sending the request, and the response interceptor executes before receiving the request. That is, before sending the request, the request interceptor will do some operations on the Config and then send it to the server. After the server returns a response, the response interceptor can process the response and then send the data back.

Knowing how to intercept, when do we need to intercept requests?

  1. The information in the config file does not meet the server requirements
  2. When a network request is sent, the loaded icon must be displayed on the page
  3. Some network requests, such as login tokens, carry special information

Cancel the request

The basic flow

  1. Configures the cancelToken object
  2. Cache the cancel function used to cancel requests
  3. Cancel the object at a later specific time by calling the cancel function
  4. Determine in the error callback if the error is Cancel, do the corresponding processing

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // The executor function takes a cancel function as an argumentcancel = c; })}); cancel();Copy the code
const CancelToken = axios.CancelToken; 
const source = CancelToken.source();

axios.get('/user/12345', {
	cancelToken: source.token
}).catch(function(thrown) {
	if (axios.isCancel(thrown)) {
		console.log('Request canceled', thrown.message);
	} else {
		// Error handling}});// Cancel the request (the message argument is optional)
source.cancel('Operation canceled by the user.');
Copy the code

Three, source code analysis

The difference between Axios and Axios?

  1. Syntactically, Axios is not an instance of Axios
  2. Functionally, Axios is an instance of Axios because it has methods on an Axios instance
  3. Axios is the function returned by the Axios.prototype.request function bind()
  4. The Axios object has all the methods on the AXIOS prototype object and all the properties on the AXIOS object: defaults/interceptors

What’s the difference between Axios and instance?

Same: both are essentially created by the createInstance() function

  1. Is a function that can make any request: request(config)
  2. Each has a method for sending a specific request: get()/post()/put()/delete()
  3. Both have default configurations and interceptors properties: defaults/interceptors

Different:

  1. The default matching value is likely to be different
  2. Instance does not have some of the methods added by Axios: create()/all()/CancleToken() and so on

axios/lib/core/Axios.js

axios/lib/axios.js

The order in which interceptors are executed

First, we need to understand that for the request interceptor, the last defined interceptor is executed first; For response interceptors, the first defined interceptors are executed first.

Source code core implementation: axios/lib/core/ axios.js

Here’s an example:

Four interceptors are defined in order: request interceptors1(fullFilled1, rejected1) Request interception2(fullFilled2, rejected2) Response interception1(fullFilled111, rejected111) Response interception2(fullfilled222, Rejected222) requestInterceptorChain = [fullfilled2 rejected2, fullfilled1, rejected1] responseInterceptorChain=[fullfilled111,rejected111,fullfilled222,rejected222] chain=[fullfilled2,rejected2,fullfilled1,rejected1,dispatchRequest,undefined, fullfilled111 rejected111 fullfilled222 rejected222]//promise = promise.then(chain-.shift (), chain-.shift ())(fullFilled2, fullected2)-->(fullFilled1,rejected1)-->(dispatchRequest,undefined) -- - > (fullfilled111 rejected111) - > (fullfilled222 rejected222)// Return the promise and execute the requested callback function
Copy the code

Basically, request interceptor -> send request -> respond interceptor -> process data.

To find out more about the last axios article, here’s how to get started with Axios