vue中axios防止多次触发终止多次请求的示例代码（防抖）
更新时间：2020年02月16日 10:30:38 作者：东吴大嘟嘟
这篇文章主要介绍了vue中axios防止多次触发终止多次请求的实现方法（防抖）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
需求
例如在搜索框中，并不是你输入一个字就需要渲染一次数据，而是取最后一次的输入内容进行搜索。
连续按下 AAAAA ，只取最后一次按下时搜索框的内容（即：AAAAA）进行搜索。 而不是搜索跟 A（第一次按下），AA（第二次按下），AAA相关联的内容
本文例子: 检测用户输入的值,监测这个值,然后根据值调用接口查询结果
代码：
<template>
<input type="text" v-model="message">
<template>
<script>
import axios from "axios";
export default {
data(){
return{
message:''
},
watch : {
message(newVal){
var that = this;
// 取消上一次请求
this.cancelRequest();
axios.get('/api/searchList?cityId=10&kw='+ newVal, {
cancelToken: new axios.CancelToken(function(c) {
that.source = c;
})
}).then((res) => {
// 在这里处理得到的数据
//数据逻辑处理
}).catch((err) => {
if (axios.isCancel(err)) {
console.log('Rquest canceled', err.message); //请求如果被取消，这里是返回取消的message
} else {
//handle error
console.log(err);
}
})
}
},
methods: {
cancelRequest(){
if(typeof this.source ==='function'){
this.source('终止请求')
}
}
}
}
</script>
其他做法：
可以使用 clearTimeout() setTimeout() 截取，设置一定时常请求一次
总结
以上所述是小编给大家介绍的vue中axios防止多次触发终止多次请求的实现方法（防抖），希望对大家有所帮助！
相关文章
vue3.x中useRouter()执行后返回值是undefined问题解决
这篇文章主要给大家介绍了关于vue3.x中useRouter()执行后返回值是undefined问题的解决方法,文中通过代码示例介绍的非常详细,对大家学习或者使用vue3.x具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了Element Collapse 折叠面板的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了Vue获取微博授权URL代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
这篇文章主要介绍了element-ui配合node实现自定义上传文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
要在 Vue 项目中使用 svg-sprite-loader 来管理 SVG 图标,需要执行相应的步骤,接下来通过本文给大家介绍VUE3 加载自定义SVG文件的详细步骤,感兴趣的朋友一起看看吧2024-01-01
基于vue 添加axios组件,解决post传参数为null的问题
下面小编就为大家分享一篇基于vue 添加axios组件,解决post传参数为null的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue中遍历数组的新方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-07-07
在vue和element-ui的table中实现分页复选功能
这篇文章主要介绍了在vue和element-ui的table中实现分页复选功能，本文代码结合图文的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
在Vue 3 Composition API中,我们可以使用自定义钩子函数来封装可复用的逻辑,useAsyncState是一个用于管理异步状态的自定义钩子函数,本文将给大家介绍一下useAsyncState的实现原理,感兴趣的朋友可以参考下2024-01-01
这篇文章主要介绍了vue动态生成新表单并且添加验证校验规则方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论