vue axios请求频繁时取消上一次请求
一、前言
在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到的结果不是我们想要的,并且对性能也有非常大的影响。例如一个搜索框,每输入一个字符都要发送一次请求,但输入过快的时候其实前面的请求并没有必要真的发送出去,这时候就需要在发送新请求的时候直接取消上一次请求。
二、代码
<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>
三、结语
这样就可以成功取消上一次请求啦!真的非常好用~
原文地址:https://segmentfault.com/a/1190000016963943
vue axios请求频繁时取消上一次请求的更多相关文章
- vue axios路由跳转取消所有请求 和 防止重复请求
直接上干货 在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖. 或者是跳转路由的时候取消还未返回的请求 第一步: axios 怎么取消 ...
- vue+axios实现移动端图片上传
在利用vue做一些H5页面时,或多或少会遇到有图片上传的操作,主要是运用html5里面的input[type=file]来实现,传递到后端的数据是以二进制的格式传递,所以上传图片的请求与普通的请求稍微 ...
- Vue+axios+Node+express实现文件上传(用户头像上传)
Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="bac ...
- vue 组件来回切换时 记住上一个组件滚动位置(keep-alive)
记住组件滚动状态: 使用场景:从某列表组件进入详情页,在返回的时候需要保留列表组件状态,包括滚动的高度.这个时候需要keep-alive配合. 方法一:如下情况导航在做普遍用法.前提是使用keep-a ...
- iview+axios实现文件取消上传
iview+axios实现文件取消上传 iview框架的上传文件目前不支持在上传文件的过程中取消上传,结合axios请求可以实现:使用iview的上传和拖拽功能,却使用axios的上传文件功能来实现取 ...
- vue 项目的文件/文件夹上传下载
前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践. ...
- .ajaxStart() / .ajaxStop() —— ajax请求开始时 / 结束时触发
一..ajaxStart()——ajax请求开始时触发 描述:ajax请求开始时触发 .ajaxStart()的回调函数,全局的,所有的ajax都可以用 写法:元素.ajaxStart(functi ...
- vue路由跳转取消上个页面的请求和去掉重复请求
vue路由跳转取消上个页面的请求和去掉重复请求 axios 的二次封装(拦截重复请求.异常统一处理) axios里面拦截重复请求
- 10. vue axios 请求未完成时路由跳转报错问题
axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...
随机推荐
- 使用jQuery实现文本框input定位到文字最后(兼容所有浏览器)
$.fn.setCursorPosition = function(position){ if(this.lengh == 0) return this; return $(this).setSele ...
- Spring Cloud(3):Ribbon的使用
基于搭建好的Eureka Server+Eureka Client:https://www.cnblogs.com/xuyiqing/p/10861541.html 有了服务,那么现在学习如何调用服务 ...
- iOS多线程系统整理 swift
多线程 是一个应用程序内多个代码的执行路径,执行线程,同时在同一时间里执行不同的任务. 三种: 1.NSTread 2.Cocoa NSOperation (NSOperation,NSOpera ...
- metaclass元类解析
一.创建类的流程 二.什么是元类 在Python3中继承type的就是元类 示例 # 方式一 class MyType(type): '''继承type的就是元类''' def __init__(se ...
- Canny边缘检测学习
Canny边缘检测学习:http://www.open-open.com/lib/view/open1453460512558.html 高斯滤波学习:http://www.cnblogs.com/q ...
- css最佳实践(reset.css)
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite ...
- Piwik-2.16.1 (OpenLogic CentOS7.2)
平台: CentOS 类型: 虚拟机镜像 软件包: centos7.2 piwik devops log analysis monitoring open-source 服务优惠价: 按服务商许可协议 ...
- spring中用xml配置构造注入的心得
spring中用xml配置构造注入时,如果 <constructor-arg> 属性都是 ref ,则不用理会参数顺序 <constructor-arg ref="kill ...
- cms-友情链接实现静态化
service: package com.open1111.service.impl; import java.util.List; import javax.servlet.ServletConte ...
- 进程peb结构、获得peb的方法
PEB :进程环境块TEB.ProcessEnvironmentBlock成员就是PEB的结构体地址TEB结构体位于FS段选择符所指的段内存的起始地址处,且ProcessEnvironmentBloc ...