vue项目中实时搜索功能的优化——减少请求次数与取消上一次请求
两个比较明显的问题：
1、每输入一个字符，就向后端发一次请求。如下图所示，当输入完一个人名的时候，就已经向后端发送了好多条请求，太多的请求会给服务器带来压力，其实在实时搜索过程中也并不需要发太多请求；
2、由于这些请求都是异步的，虽然发送请求时有先后顺序，但是返回的结果并不会按照发送请求那样有个先后顺序，而是哪个先匹配出结果哪个就先返回，后返回来的结果会将先返回来的结果覆盖，这样导致在最后输入完之后，发现下面展示的并不是最终的搜索结果。如下图所示，当输完“libai”时，下方展示的内容并不是“libai”对应的内容，而是“li”对应的内容
针对上述两个问题进行优化：
1、减少请求次数
监听输入框，当输入框中内容变化时触发inputChange事件，remoteSearch是用来触发实时搜索父元素向后端发送请求，通过设置定时器实现对请求次数的限制。
inputChange(val) {
if(this.timer){
clearTimeout(this.timer);
}
if(val){
this.timer = setTimeout(() => {
this.$emit('remoteSearch', val);
}, 300)
}else{
// 输入框中的内容被删为空时触发，此时会清除之前展示的搜索结果
this.$emit('remoteSearch', val);
}
},
2、取消上一次请求
在vue项目中，异步请求一般使用的是axios对象，取消上一次请求则是利用它的CancelToken属性。
具体实现代码：
// 在文件中引入axios
import axios from 'axios';
......
// 定义一个全局的cancel变量
data() {
return {
cancel: null,
}
}
......
// 监听输入框所触发的实时搜索组件用于向后端请求的方法
remoteSearch(keyword) {
// 如果存在上一次请求，则取消上一次请求
if(this.cancel){
this.cancel();
}
// 定义CancelToken，它是axios的一个属性，且是一个构造函数
let CancelToken = axios.CancelToken;
// 使用axios的get方法获取请求结果，在请求时需要传入cancelToken参数，
// 实例化一个CancelToken，实例化后会生成一个类似于id的请求令牌，将它赋值给全局的cancel变量。
axios.get('/api/sys/user/list', {
params: { name: keyword },
cancelToken: new CancelToken((c) => {
this.cancel = c;
})
}).then((res) => {
// 将请求的结果赋值给personData全局变量，用于展示搜索结果
if (res.data.code === '0') {
this.personData = res.data.data || [];
} else {
this.personData = [];
}
})
},
网友评论