axios中断网络请求操作。

本文介绍了解决在开发中因参数变化导致的重复请求问题,通过创建pending数组和axios拦截器实现对post请求的中断处理,避免旧数据覆盖新数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文章目录

背景

例如:在实际开发中,有可能遇到这种情况就是:某些请求会根据参数的变化而重新发新的请求。就会遇到如果第一次请求的数据量大,而第二次请求的数据量小。那么第二个接口会先fullfilled,第一个接口有可能还在pending状态。所以当第一个接口请求完数据回来就会把我们实际需要的数据(第二次请求的数据,也就是最新的数据)进行覆盖掉会产生一些麻烦。因为我们需要的是最新请求的数据,而不是之前的数据。

思路

首先想到的是在请求数据之前清除所有的正在pending的网络请求
在网上查找到了一个比较好一点的解决方案;在这里记录一下:
首先附上axios官网的例子:axios官网例子
1.首先创建一个pending数组用于存储中断函数和请求标识
2.然后在axios的请求拦截器里对请求进行拦截,并把标识push进pending数组中

let request = axios.create();
const CancelToken = axios.CancelToken;

// 1.存储中断函数和请求标识
let pending = []; //声明一个数组用于存储每个ajax请求

//2.在请求拦截器中进行push 数据收集
request.interceptors.request.use(config => {
  removePending(config);
  config.cancelToken = new CancelToken(c => {
    pending.push({ cancel: c, url: config.url + '&' + config.method });
  });
  return Promise.resolve(config);
});

3.对请求进行中断处理
在这里还有一些问题,因为如果是get请求的话之后的请求不会中断前面的那个相同接口的get请求,除非参数一致才会中断。

const removePending = config => {
  for (let p in pending) {
    if (pending[p].url === config.url + '&' + config.method) {
      pending[p].cancel('request canceled'); // 只有pending状态时才会执行取消请求操作,因为其他状态时已经请求完成了,没必要进行中断请求了。
      pending.splice(p, 1);
    }
  }
};

4.然后在相应拦截器里进行清除数据

const responseInterceptResolve = response => {
  removePending(response.config); //对已经fullfilled的请求从pending中清除
  return Promise.resolve(response.data).catch(err => {
    console.error(err);
  });
};
request.interceptors.response.use(responseInterceptResolve, error => {});

注意

这里只对post请求进行了中断处理,如果是get请求的话,大致思路是对请求的url进行截取处理然后判断。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值