终止基于axios正在进行的请求

终止基于axios的未完成的http请求

关键词：CancelToken source source.token 参考地址

应用场景：tab页频繁切换，页面的切换，用于终止正在挂起的请求

项目的如何应用

• 配置参数

  axios({
          method: 'post',
          url: url,
          withCredentials: false,
          params: params,
          data: data,
          cancelToken:data.cancelToken,
          headers: headerParam
        }).then(resp => {
          resolve(resp)
        }).catch(error => {
          reject(error)
        })
  

  本项目中在调用请求那传入令牌 cancelToken:data.cancelTokendata为传入的参数

• 调用接口前，传入上一步需要的令牌

  let CancelToken = this.axios.CancelToken;
  this.source = CancelToken.source();
  data.cancelToken = this.source.token;
  

  axios 在 main.js中挂载到了 实例中， data data 为请求的参数，this.source中有token令牌和取消请求的cancel方法

• 终止请求

  cancelRequest(){
     this.source.cancel("异常信息,选填")
  },
  

  在发起新的请求的时候，执行一下this.source.cancel()即可终止正在挂起的请求。

以上只是对单个接口做了处理，如需要多个接口做处理可能比较复杂，觉得可以这么做试一下(针对页面切换的场景)

• 在main.js中挂载一个全局的数组$arr，用来保存每个接口的 source
• 在每个请求中保存source ``$arr.push(source)`
• 在路由守卫中router.beforeEach，遍历$arr,执行每一个source的cancel方法，遍历完记得清空$arr