项目中如何使用axios过滤多次重复请求详解

  // 一个promise
  let resolvePromise
  let p = new Promise((resolve, reject) => {
    resolvePromise = resolve
  })
  // 这样在外部执行
  resolvePromise()

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

    // 声明一个全局map
    const pendingHttp = new Map()
    // axios中内置的CancelToken类
    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)) { // 如果在 pending 中存在当前请求标识，需要取消当前请求，并且移除
        const cancel = pendingHttp.get(url)
        cancel(url + '取消了')
        pendingHttp.delete(url) // 清空当前url的缓存
      }
    }

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

      cancelApi(config)
      addApi(config)
      
      // 本地调试的时候,是跨域的情况，加请求头会有限制(此处是项目代码无关紧要)
      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 => {
        // 请求超时
        if (error.message.includes('timeout')) { // 判断请求异常信息中是否含有超时timeout字符串
          Toast.error({ text: '网页请求超时，请刷新重试~' })
        }
        sentryCatchApi(error)
        return Promise.reject(error)
      }
    )

    // 假设我们的error方法是这样封装的。 来看一下sentryCatchApi
    error => {
      sentryCatchApi(error)
      return Promise.reject(error)
    }
  // 由于这个方法需要接收一个对象，但是我们cancel取消请求的情况下，返回的是一个字符串，这时就报错了。
  function sentryCatchApi (res) {
      try {
        res = res || {}
        const resData = res.data || {}
        Sentry.captureException(JSON.stringify(resData))
        console.log(`
          获取数据失败:
          请在浏览器中打开进入 webview的地址，并粘贴出来，便于问题排查
          :接口相关信息:
          接口地址:${res.config.url},
          接口返回值:code:${resData.code},
          message:${resData.message},
          data:${JSON.stringify(resData.data)}
        `)
      } catch (err) {
        console.error(err)
      }
    }

   error => {
    if (axios.isCancel(error)) return console.log('请求被取消了', error.message)
    sentryCatchApi(error)
    return Promise.reject(error)
  }