axios拦截器中误触发送相同请求时取消上一次请求

Question

使用axios封装了一个实例，请问怎么在此实例中取消上一次请求，只保留最后一次请求；

使用场景有：

1. 误触时取消某个相同的请求
2. 页面跳转时，使用同一个接口不同参数，但是上一个比当前页面接口回来慢，会导致当前页面数据是上个页面的。

// 创建axios实例
let instance = axios.create();
instance.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/**
 * 请求拦截器
 */
instance.interceptors.request.use(
  config => {
    return config;
  },
  error => Promise.error(error)
);
// 响应拦截器
instance.interceptors.response.use(

)

export default instance

Answer 1

https://segmentfault.com/a/11...

Answer 2

正常思路应该是阻止第二次请求。因为请求一旦发出，后端必然会收到并且响应，发送2次，后端就响应2次。
修改数据的操作不应该请求2次,会导致数据错乱；而不修改数据的操作也不应该请求2次，因为造成服务器资源的不必要开销。

但是还是有一些时候我们需要清除一些请求，比如页面切换过程中上一个页面的残留请求，会导致影响当前页面的展示，这种情况可以使用前端取消。
前端取消仅仅是前端请求的promise直接调用reject（即走请求错误，后续请求回来不管结果是什么都不加处理）。
这里需要确定你需要的是哪种效果。
如果是第一种，那可以设置一个标记比如一个变量requestLock为true，请求回来或者请求错误，则恢复标记为false，标记存在，则不能发起请求。
如果你确实需要前端取消请求的响应，那你可以使用axios.CancelToken:
查看文档

Answer 3

axios 不太熟,我用的这种方式，可以试试看

// 声明全局变量
var timeoutID 

function eClick (){
    clearTimeout(timeoutID)
    timeoutID = setTimeout(functiono(){
        //执行的代码
        //发送请求
    }, 100)
}

在0.1秒内触发多次 eClick 事件只会触发一次