0

使用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
6月27日提问
3 个回答
0

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

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

clipboard.png

0

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

// 声明全局变量
var timeoutID 

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

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

撰写答案

推广链接