vue axios请求频繁时取消上一次请求的方法


Posted in Javascript onNovember 10, 2018

一、前言

在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到的结果不是我们想要的,并且对性能也有非常大的影响。例如一个搜索框,每输入一个字符都要发送一次请求,但输入过快的时候其实前面的请求并没有必要真的发送出去,这时候就需要在发送新请求的时候直接取消上一次请求。

二、代码

<script>
import axios from 'axios'
import qs from 'qs'

export default {
  methods: {
    request(keyword) {
      var CancelToken = axios.CancelToken
      var source = CancelToken.source()
       
      // 取消上一次请求
      this.cancelRequest();
      
      axios.post(url, qs.stringify({kw:keyword}), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Accept': 'application/json'
        },
        cancelToken: new axios.CancelToken(function executor(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);
        }
      })
    },
    cancelRequest(){
      if(typeof this.source ==='function'){
        this.source('终止请求')
      }
    },
  }
}
</script>

三、结语

这样就可以成功取消上一次请求啦!以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
微信小程序实现跑马灯效果
Oct 21 #Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 #Javascript
vue.js自定义组件directives的实例代码
Nov 09 #Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 #Javascript
webpack 静态资源集中输出的方法示例
Nov 09 #Javascript
vue中如何去掉空格的方法实现
Nov 09 #Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 #Javascript
You might like
PHP实现微信公众平台音乐点播
2014/03/20 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
php session的锁和并发
2016/01/22 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
js倒计时显示实例
2016/12/11 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
浅谈python3中input输入的使用
2019/08/02 Python
Python解析json代码实例解析
2019/11/25 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
户籍证明的格式
2014/01/13 职场文书
大学生校园创业计划书
2014/02/08 职场文书
食品采购员岗位职责
2014/04/14 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
2015年招聘工作总结
2014/12/12 职场文书
学前班学生评语
2014/12/29 职场文书
总账会计岗位职责
2015/04/02 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书