vue中axios防止多次触发终止多次请求的示例代码(防抖)


Posted in Javascript onFebruary 16, 2020

需求

例如在搜索框中,并不是你输入一个字就需要渲染一次数据,而是取最后一次的输入内容进行搜索。

连续按下 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防止多次触发终止多次请求的实现方法(防抖),希望对大家有所帮助!

Javascript 相关文章推荐
JavaScript静态的动态
Sep 18 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
vue实现表单录入小案例
Sep 27 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 #Javascript
封装一下vue中的axios示例代码详解
Feb 16 #Javascript
Vue.js的模板语法详解
Feb 16 #Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 #Javascript
vue数据响应式原理知识点总结
Feb 16 #Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 #Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 #Javascript
You might like
第八节--访问方式
2006/11/16 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
神经网络理论基础及Python实现详解
2017/12/15 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
祖国在我心中的演讲稿
2014/05/04 职场文书
低碳环保演讲稿
2014/08/28 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
营销计划书范文
2015/01/17 职场文书
英文版辞职信
2015/02/28 职场文书
数学教师求职信范文
2015/03/20 职场文书
办公用品管理制度
2015/08/04 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
python 闭包函数详细介绍
2022/04/19 Python