Vue axios interceptor commonly used repeated request cancellation

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 {
     // Handle error }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

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

const CancelToken = axios.CancelToken;
let cancel;

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

// cancel the request
cancel();

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

const pendingRequest = new Map(); // Request object const CancelToken = axios.CancelToken;

axios.defaults.timeout = 30000
axios.defaults.baseURL = baseURL.target

// Add request interceptor axios.interceptors.request.use(function(config) {
  // Do something before sending the request config.headers = {
      'content-type': 'application/json',
      'token': getToken()
  }
  // Get the request key
  let requestKey = getReqKey(config);

  // Determine whether it is a repeated request if (pendingRequest.has(requestKey)) { // It is a repeated request removeReqKey(requestKey); // Cancel }else{
    // Set cancelToken
    config.cancelToken = new CancelToken(function executor(cancel) {
      pendingRequest.set(requestKey, cancel); // set })
  }

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

// Add response interceptor axios.interceptors.response.use(function (response) {
  // Delete requestKey in the request object
  let requestKey = getReqKey(response.config);
  removeReqKey(requestKey);

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

// Get the request key
function getReqKey(config) {
  // The string generated by the request method, request address, and request parameters is used as the basis for whether to repeat the request const { method, url, params, data } = config; // Deconstruct these parameters // GET ---> params POST ---> data
  const requestKey = [method, url, qs.stringify(params), qs.stringify(data)].join('&');
  return requestKey;
}

// Cancel duplicate request function removeReqKey(key) {
  const cancelToken = pendingRequest.get(key);
  cancelToken(key); // Cancel the previously sent request pendingRequest.delete(key); // Delete requestKey in the request object
}