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 &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
javascript document.execCommand() 常用解析
Dec 14 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
微信小程序之数据绑定原理解析
Aug 14 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
smarty自定义函数用法示例
2016/05/20 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
数组Array的一些方法(总结)
2017/02/17 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python实现通讯录功能
2018/02/22 Python
pip命令无法使用的解决方法
2018/06/12 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
升学宴主持词
2014/04/02 职场文书
团干部培训方案
2014/06/03 职场文书
节能环保口号
2014/06/12 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
Python中的pprint模块
2021/11/27 Python