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 相关文章推荐
可输入的下拉框
Jun 19 Javascript
JavaScript版代码高亮
Jun 26 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
js实现网页版贪吃蛇游戏
Feb 22 Javascript
JS实现放大镜效果
Sep 21 Javascript
Nuxt 项目性能优化调研分析
Nov 07 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
php加密解密字符串示例
2016/10/13 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
JavaScript EasyPager 分页函数
2011/05/25 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Django实现表单验证
2018/09/08 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
大学活动策划书范文
2014/01/10 职场文书
毕业自我鉴定书
2014/03/24 职场文书
中国入世承诺
2014/04/01 职场文书
教师对学生的寄语
2014/04/03 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
新闻稿格式范文
2015/07/18 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书