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 相关文章推荐
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
微信小程序实现跑马灯效果
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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
Python标准库之循环器(itertools)介绍
2014/11/25 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Python选课系统开发程序
2016/09/02 Python
python数据处理实战(必看篇)
2017/06/11 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
使用python实现BLAST
2018/02/12 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
Python如何实现机器人聊天
2020/09/10 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
门诊手术室工作制度
2014/01/30 职场文书
药品营销策划方案
2014/06/15 职场文书
考试没考好检讨书
2015/05/06 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript