vue中使用cancelToken，解决多次调用相同接口，只用保留最后一次的结果

背景：

      很多筛选维度和条件，用户每点一个筛选项，发起检索，页面展示数据

操作：

     筛选面板的条件很多，用户可以频繁点击不同的筛选项，对用户不做任何防抖和节流的限制

问题：

     接口的响应时间不是固定的，比如我第一次点击，网络不好，接口5秒才返回数据，而我的第二次点击，网络很好，只需要2秒返回数据，那么实际上页面展示的数据可能是第一次调用返回的，就导致页面错乱

解决：

调用接口的时候，增加参数：

 在拦截器中写好逻辑

// 添加请求拦截器，在发送请求之前做些什么(**具体查看axios文档**)--------------------------------------------
axios.interceptors.request.use(function (config) {
    if(config.data){
      if(config.data && config.data.specialFlag == '1') {
        config.cancelToken = new axios.CancelToken(cancel => {
//在vuex中存储一个全局的数组，在调用的接口中增加specialFlag参数用于判断需要cancel的接口，我这里多加了一个路由名称，参数可自己定义
          store.state.axiosRequest.push({cancel,routeName:config.data.routeName})
//正式发起请求之后，删除接口无关的参数，不然接口可能会报错
          delete config.data.specialFlag
          delete config.data.routeName
        })
      }
    }
    return Promise.resolve(config)
    }, function (error) {
    // 请求错误时弹框提示，或做些其他事
    return Promise.reject(error)
})

以上两部分完成之后，用户可正常调用接口，在要重新调用接口的时候取消上一次调用

 频繁调用之后，控制台显示：