前端实时查询,网络请求数据结果覆盖问题

2020-08-03T13:48:43
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

问题

在前端页面数据查询时,可能会遇到实时搜索的需求。在实时搜索时,就可能存在一个问题,就是后一次请求数据被前一次覆盖的问题。

环境

vue项目,使用axios发请求

思考过程

  1. 解决以上问题,我们实际只需要向后台发送最后一次数据请求就可以了。
  2. 但是,我们如何才能知道用户哪次的请求是最后一次改变搜索参数呢?
  3. 鉴于问题2,我们如果能够在发送请求前,取消前一次请求就可以解决问题了

解决方案

在axios中有提供一个取消请求的方法,下面是示例代码

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

那么这样,我们只需要在每一次请求之前,调用cancel方法就可以取消前一次请求,就不会存在数据覆盖问题啦。

进一步思考

cancel真的取消了数据查询请求吗?

通过查看axios源码,发现cancel方法实际上是调用XMLHttpRequest.abort()实现的。
实际上,后台接收到前端的http请求后,就算前端调用了cancel方法,但是后台还是会对请求进行处理。那么我们目前对实时请求的解决方案并不能减少后台处理无用请求的次数。

方案二

针对以上问题,如果想同时减少后台查询的压力,我们可以给查询方法加一层防抖处理。但是这样有一个弊端就是,查询请求会有延时。

扫一扫关注公众号添加购物返利助手,领红包
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。