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实现当滑动到一定位置时固定效果
Jun 17 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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生成WAP页面
2006/10/09 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
Js四则运算函数代码
2012/07/21 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
js微信支付实现代码
2016/12/22 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
Python六大开源框架对比
2015/10/19 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
python的变量与赋值详细分析
2017/11/08 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
关于青春的演讲稿
2014/05/05 职场文书
党委班子对照检查材料
2014/08/19 职场文书
大学生实习证明范本
2014/09/19 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
React如何创建组件
2021/06/27 Javascript