例如在搜索框中,并不是你输入一个字就需要渲染一次数据,而是取最后一次的输入内容进行搜索。
连续按下五星级,只取最后一次按下时搜索框的内容(即:五星级)进行搜索。而不是搜索跟一个(第一次按下),AA(第二次按下),AAA相关联的内容
本文例子:检测用户输入的值,监测这个值,然后根据值调用接口查询结果
& lt; template>
& lt;输入类型=拔谋尽眝模型=跋ⅰ北?
& lt; template>
& lt; script>
从“进口axios axios”;
出口默认{
数据(){
返回{
消息:“
},
看:{
消息(newVal) {
var=这个;//取消上一次请求
this.cancelRequest ();
axios.get ('/api/searchlist # 63; cityId=10,千瓦=' + newVal, {
cancelToken:新axios.CancelToken(函数(c) {
那源=c;
}）
})((res)=比;{//在这里处理得到的数据//数据逻辑处理
}).catch ((err)=比;{
如果(axios.isCancel (err)) {
控制台。日志(Rquest取消,err.message);//请求如果被取消,这里是返回取消的消息
其他}{//处理错误
console.log(错);
}
}）
}
},
方法:{
cancelRequest () {
如果(typeof。源===昂?{
this.source(“终止请求”)
}
}
}
}
& lt;/script>
,其他做法:
,,可以使用clearTimeout (),,setTimeout (),截取,设置一定时常请求一次
以上所述是小编给大家介绍的vue中axios防止多次触发终止多次请求的实现方法(防抖),希望对大家有所帮助!
