引言
搜索功能，我想很多业务都会涉及，这个功能的特点是：
- 用户可以在输入框中输入一个关键字，然后在一个列表中显示该关键字对应的数据；
- 输入框是可以随时修改/删除全部或部分关键字的；
- 如果是实时搜索🔍（即输入完关键字马上出结果，不需要额外的操作或过多的等待），接口调用将会非常频繁。
实时搜索都会面临一个通用的问题，就是：
浏览器请求后台接口都是异步的，如果先发起请求的接口后返回数据，列表/表格中显示的数据就很可能会是错乱的。
会引发的bug如下：
搜索的时候，连续快速输入或者删除关键字，搜索结果和搜索关键字不匹配。
问题分析：
- 浏览器从服务器发起的请求都是异步的；
- 由于前一次请求服务器返回比较慢，还没等第一次请求返回结果，后一次请求就发起了，并且迅速返回了结果，这时表格肯定显示后一次的结果；
- 过了2秒，第一次请求的结果才慢吞吞地返回了，这时表格错误地又显示了第一次请求的结果；
- 最终导致了这个bug。
怎么解决呢？
在想解决方案之前，得想办法必现这个问题，靠后台接口是不现实的，大部分情况下后台接口都会很快返回结果。
所以要必现这个问题，得先模拟慢接口。
模拟慢接口，请参考另一篇文章
取消慢接口请求
能模拟慢接口，就能轻易地必现测试提的问题啦！
先必现这个问题，然后尝试修复这个问题，最后看下这个问题还出不出现，不出现说明我们的方案能解决这个bug，问题还有说明我们得想别的办法。
fetch
先来看下 fetch，fetch 是浏览器原生提供的 AJAX 接口，使用起来也非常方便。
使用 fetch 发起一个 post 请求：
fetch('http://localhost:3000/getList', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify({
id: 1
})
}).then(result => {
console.log('result', result);
}); 可以使用 AbortController 来实现请求取消：
this.controller?.abort(); // 重新发起 http 请求之前，取消上一次请求
const controller = new AbortController(); // 创建 AbortController 实例
const signal = controller.signal;
this.controller = controller;
fetch('http://localhost:3000/getList', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify({
id: 1
}),
signal, // 信号参数，用来控制 http 请求的执行
}).then(result => {
console.log('result', result);
});fetch请求补充说明：
- 尽量在单独的请求方法中添加，如果放在公用请求库里处理，会出现其它pedding中的接口也被取消了
- 放在单独的请求方法中，export方法不能使用default
axios
再来看看 axios，先看下如何使用 axios 发起 post 请求。
发起post请求
axios.post('http://localhost:3000/getList', {
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
data: {
id: 1,
},
})
.then(result => {
console.log('result:', result);
});axios 发起的请求可以通过 cancelToken 来取消。
this.source?.cancel('The request is canceled!');
this.source = axios.CancelToken.source(); // 初始化 source 对象
axios.post('http://localhost:3000/getList', {
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
data: {
id: 1,
},
}, { // 注意是第三个参数
cancelToken: this.source.token, // 这里声明的 cancelToken 其实相当于是一个标记或者信号
})
.then(result => {
console.log('result:', result);
});
