How to use axios to filter multiple repeated requests in a project

  // a promise
  let resolvePromise
  let p = new Promise((resolve, reject) => {
    resolvePromise = resolve
  })
  // This executes resolvePromise() externally

    CancelToken.source = function source() {
    var cancel;
    // 
    var token = new CancelToken(function executor(c) {
        cancel = c;
    });
    return {
        token: token,
        cancel: cancel,
    };

    //Declare a global map
    const pendingHttp = new Map()
    // CancelToken class built into axios const CancelToken = axios.CancelToken
       
    function addApi (config) {
      config.cancelToken = new CancelToken((cancel) => {
        const url = config.url
        console.log(pendingHttp)
        if (!pendingHttp.has(url)) {
          pendingHttp.set(url, cancel)
        }
      })
    }

    function cancelApi (config) {
      const url = config.url
      if (pendingHttp.has(url)) { // If the current request identifier exists in pending, you need to cancel the current request and remove const cancel = pendingHttp.get(url)
        cancel(url + 'cancelled')
        pendingHttp.delete(url) // Clear the cache of the current url}
    }

    httpService.interceptors.request.use(config => {

      cancelApi(config)
      addApi(config)
      
      // When debugging locally, it is a cross-domain situation, and adding a request header will have restrictions (the project code here is irrelevant)
      const { headers = {} } = config; const { globalObj = {} } = window
      Object.assign(headers, globalObj, { from })
      
      return config
    }, error => {
      console.log(error)
      return Promise.reject(error)
    })

    httpService.interceptors.response.use(
      response => {
        cancelApi(response.config)
        sentryCatchApi(response)
      },
      error => {
        // Request timeoutif (error.message.includes('timeout')) { // Determine whether the request exception information contains the timeout string Toast.error({ text: 'Webpage request timeout, please refresh and try again~' })
        }
        sentryCatchApi(error)
        return Promise.reject(error)
      }
    )

    // Assume that our error method is encapsulated like this. Let's take a look at sentryCatchApi
    error => {
      sentryCatchApi(error)
      return Promise.reject(error)
    }
  // Because this method needs to receive an object, but when we cancel the request, a string is returned, and an error is reported.
  function sentryCatchApi (res) {
      try {
        res = res || {}
        const resData = res.data || {}
        Sentry.captureException(JSON.stringify(resData))
        console.log(`
          Failed to obtain data:
          Please open the address of webview in the browser and paste it out to facilitate troubleshooting: Interface related information:
          Interface address: ${res.config.url},
          Interface return value: code: ${resData.code},
          message:${resData.message},
          data:${JSON.stringify(resData.data)}
        `)
      } catch (err) {
        console.error(err)
      }
    }

   error => {
    if (axios.isCancel(error)) return console.log('The request was canceled', error.message)
    sentryCatchApi(error)
    return Promise.reject(error)
  }