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

问题

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

环境

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方法，但是后台还是会对请求进行处理。那么我们目前对实时请求的解决方案并不能减少后台处理无用请求的次数。

方案二

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