Repeated requests commonly used by vue axios interceptors are cancelled

introduction

The previous article introduced the simple encapsulation of axios. I learned about the application scenarios and methods of axios interceptor. Today I will take a look at how to deal with the interceptor in cases where the response time is too long and the number of requests is too high.

Methods to cancel the request

Axios uses internally provided CancelToken to cancel the request

Official website example 1: Create a cancel token using factory method, like this

const CancelToken = ;
const source = ();

('/user/12345', {
  cancelToken: 
}).catch(function(thrown) {
  if ((thrown)) {
    ('Request canceled', );
  } else {
     // Handle errors  }
});

('/user/12345', {
  name: 'new name'
}, {
  cancelToken: 
})

// Cancel the request (message parameter is optional)('Operation canceled by the user.');

Official website example 2: Create a cancel token by passing an executor function to the constructor of CancelToken:

const CancelToken = ;
let cancel;

('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // The executor function receives a cancel function as a parameter    cancel = c;
  })
});

// cancel the request
cancel();

You can see that the above are all cancel tokens created in a single request. In actual work, we need to process all requests. Next, let’s take a look at how to implement the cancel request function in the interceptor.

Cancel duplicate request in the interceptor

import axios from 'axios'
import baseURL from './config'
import qs from 'qs'

const pendingRequest = new Map(); // Request objectconst CancelToken = ;

 = 30000
 = 

// Add a request interceptor(function(config) {
  // What to do before sending a request   = {
      'content-type': 'application/json',
      'token': getToken()
  }
  // Get the request key  let requestKey = getReqKey(config);

  // Determine whether it is a duplicate request  if ((requestKey)) { // It's a duplicate request    removeReqKey(requestKey); // Cancel  }else{
    // Set cancelToken     = new CancelToken(function executor(cancel) {
      (requestKey, cancel); // set up    })
  }

  return config;
}, function (error) {
  // Request error  return (error);
});

// Add a response interceptor(function (response) {
  // Delete requestKey from the request object  let requestKey = getReqKey();
  removeReqKey(requestKey);

  // Do something about the returned data, such as intercepting the status  if ( !== 200) {
      Toast({
        message: ,
        type: 'warning',
        duration: 1000
      })
      return
    }
    
  // No problem Return server data  return ;
}, function (error) {
  let requestKey = getReqKey();
  removeReqKey(requestKey);
  
  // Response error  return (error);
});

// Get the request keyfunction getReqKey(config) {
  // The string generated by the request method, request address, and request parameters are used as the basis for whether to request repeatedly  const { method, url, params, data } = config; // Deconstruct these parameters  // GET ---&gt; params  POST ---&gt; data
  const requestKey =  [ method, url, (params), (data)].join('&amp;');
  return requestKey;
}

// Cancel duplicate requestfunction removeReqKey(key) {
  const cancelToken = (key);
  cancelToken(key); // Cancel the request sent previously  (key); // Delete requestKey from the request object}

Conclusion

The above is the processing of repeated requests. If you are not clear about the interceptor, you can read the previous article. If you have any questions, please give me a correction and I will update it as soon as possible.

This is the article about the commonly used repeated request cancellation of vue axios interceptors. This is all about this article. For more related contents of repeated request cancellation of axios interceptors, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!