axios取消接口请求
axios取消请求
这里就是分析一下接口请求需要被取消时的一些操作
因为我是用vue写的项目，所以标配用的是axios，怎么在axios中取消已经发送的请求呢？
1.在这之前我们还是先介绍一下原生js的abort()这个方法。
直接上代码会比较好一点
<divclass="page"id="app"><buttonclass="get-msg">获取数据</button><buttonclass="cancel">取消获取</button></div><script>
var currentAjax = null
$('.get-msg').click(function () {
currentAjax = $.ajax({
type: 'GET',
url: 'http://jsonplaceholder.typicode.com/comments',
success: function (res) {
console.log(res)
},
error: function (err) {
console.log("获取失败")
}
})
})
$('.cancel').click(function () {
if (currentAjax) {
currentAjax.abort()
}
})
</script>
点击获取数据按钮打印出来的数据
点击获取数据之后超超超快快快的手速点击取消获取按钮打印出来的效果
看这两张效果图就知道，我们的abort()方法起作用了！！！！
2.在axios中取消接口请求操作
好了，接下来才是我们的主题，Axios官方提供了一个取消接口请求的方法，但是怎么用这个方法官网写的很简略（不知道是不是我没找全的问题），反正官网的axios取消接口请求累的半死没看懂，后来是扒了很多大佬的博客，才自己理解出来的
Axios 提供了一个 CancelToken的函数，这是一个构造函数，该函数的作用就是用来取消接口请求的，至于怎么用，看代码吧，我在代码中写了注解
<body><divclass="page"id="app"><button@click="getMsg"class="get-msg">获取数据</button><button@click="cancelGetMsg"class="cancel">取消获取</button><ul><liv-for="item in items">{{item.name}}</li></ul></div><script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
items: [],
cancel: null
},
methods: {
getMsg () {
let CancelToken = axios.CancelToken
let self = this
axios.get('http://jsonplaceholder.typicode.com/comments', {
cancelToken: new CancelToken(function executor(c) {
self.cancel = c
console.log(c)
// 这个参数 c 就是CancelToken构造函数里面自带的取消请求的函数，这里把该函数当参数用
})
}).then(res => {
this.items = res.data
}).catch(err => {
console.log(err)
})
//手速够快就不用写这个定时器了，点击取消获取就可以看到效果了
setTimeout(function () {
//只要我们去调用了这个cancel()方法，没有完成请求的接口便会停止请求
self.cancel()
}, 100)
},
//cancelGetMsg 方法跟上面的setTimeout函数是一样的效果，因为手速不够快，哦不，是因为网速太快，导致我来不及点取消获取按钮，数据就获取成功了
cancelGetMsg () {
// 在这里去判断你的id 1 2 3，你默认是展示的tab1，点击的时候不管你上一个请求有没有执行完都去调用这个cancel()，
this.cancel()
}
}
})
</script></body>
上两张效果图展示一下：
点击获取数据按钮获获取到了数据
点击获取数据之后，用快快快的佛山无影手点击了取消获取得到的效果
这样，就完美的解决了我遇到的问题了，点击tab切换的时候，网络敢延迟，我就敢掐掉你的请求，保证我下一个请求不被影响
3.重复点击问题
那我们经常开发的时候会遇到一个重复点击的问题，短时间内多次点击同一个按钮发送请求会加重服务器的负担，消耗浏览器的性能，多以绝大多数的时候我们需要做一个取消重复点击的操作
在vue开发中，这个方法一样完美解决这一问题，通常我们会封装一遍axios，这里我们便可以将此功能封装到拦截器里面去
import axios from 'axios';
axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';
let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
let cancelToken = axios.CancelToken;
let removePending = (ever) => {
for(let p in pending){
if(pending[p].u === ever.url + '&' + ever.method) { //当当前请求在数组中存在时执行函数体
pending[p].f(); //执行取消操作
pending.splice(p, 1); //把这条记录从数组中移除
}
}
}
//http request 拦截器
axios.interceptors.request.use(
config => {
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type':'application/x-www-form-urlencoded'
}
// ------------------------------------------------------------------------------------
removePending(config); //在一个ajax发送前执行一下取消操作
config.cancelToken = new cancelToken((c)=>{
// 这里的ajax标识我是用请求地址&请求方式拼接的字符串，当然你可以选择其他的一些方式
pending.push({ u: config.url + '&' + config.method, f: c });
});
// -----------------------------------------------------------------------------------------
return config;
},
error => {
return Promise.reject(err);
}
);
//http response 拦截器
axios.interceptors.response.use(
response => {
// ------------------------------------------------------------------------------------------
removePending(res.config); //在一个ajax响应后再执行一下取消操作，把已经完成的请求从pending中移除
// -------------------------------------------------------------------------------------------
if(response.data.errCode ==2){
router.push({
path:"/login",
querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
})
}
return response;
},
error => {
return Promise.reject(error)
}
)
这是我自己项目用来封装axios的代码，里面加入了取消重复点击事件的方法.
axios取消接口请求的更多相关文章
- Axios 取消 Ajax 请求
Axios 取消 Ajax 请求 Axios XMLHttpRequest https://caniuse.com/?search=XMLHttpRequest https://developer.m ...
- vue axios 取消上次请求
axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...
- 前端进阶（2）使用fetch/axios时， 如何取消http请求
前端进阶(2)使用fetch/axios时, 如何取消http请求 1. 需求 现在前端都是SPA,我们什么时候需要取消HTTP请求呢? 当我们从一个页面跳转到另外一个页面时,如果前一个页面的请求还没 ...
- vue使用axios调用接口
vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具,这个axios也是vue官方推荐的库.axios的官方github: https://github.com/mza ...
- 使用Typescript重构axios(二十一)——请求取消功能：添加axios.isCancel接口
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- axios 取消请求
解决思路 在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖. axios官方文档取消请求说明 方法一: const CancelTok ...
- 使用Typescript重构axios(十八)——请求取消功能：总体思路
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(十九)——请求取消功能：实现第二种使用方式
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(二十)——请求取消功能：实现第一种使用方式
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
随机推荐
- MySQL高级查询与编程笔记 • 【第2章 数据定义和操作】
全部章节 >>>> 本章目录 2.1 数据定义语言和数据操作语言 2.1.1 设计"优乐网"数据库 2.1.2 数据定义语言 2.1.3 数据操作语言 ...
- POJ 2442 Sequence堆 优先队列
题目描述 给定m个序列,每个序列包含n个非负整数.现在我们可以从每个序列中选择一个数字以形成一个具有m个整数的序列.显然,我们可以得到n ^ m种这种序列.然后,我们可以计算每个序列中的数字总和,并获 ...
- GOF23种设计模式之单例模式(java)
GOF(group of four):四人帮 分类 创建者模式 单例模式 核心作用:保证一个类只有一个实例,并且提供一个访问该实例的全局访问点 优点: 由于单例模式只生成一个实例,减少了系统性能开销, ...
- java POJO中 Integer 和 int 的不同,用int还是用Integer
https://www.jianshu.com/p/ff535284916f [int和Integer的区别] int是java提供的8种原始类型之一,java为每个原始类型提供了封装类,Intege ...
- spring security 继承 WebSecurityConfigurerAdapter 的重写方法configure() 参数 HttpSecurity 常用方法及说明
HttpSecurity 常用方法及说明 方法 说明 openidLogin() 用于基于 OpenId 的验证 headers() 将安全标头添加到响应 cors() 配置跨域资源共享( CORS ...
- 新建koa2项目
1.npm install -g koa-generator 2.koa2 项目名称,如果需要ejs引擎koa2 -e 项目名称 3.cd 项目名称 4.npm install 5.npm insta ...
- Hive的基本概念和常用命令
原文链接: https://www.toutiao.com/i6766571623727235595/?group_id=6766571623727235595 一.概念: 1.结构化和非结构化数据 ...
- linux 查看端口占用情况并关闭进程
首先要搞清楚 linux 查看进程和查看端口是两个概念,一般来讲进程会有多个,而固定端口只会有一个. 1.查看进程 ,通常在使用 ps 命令后 用管道连接(ps -ef|grep xxx ) 查 ...
- leetcode 986. 区间列表的交集
问题描述 给定两个由一些 闭区间 组成的列表,每个区间列表都是成对不相交的,并且已经排序. 返回这两个区间列表的交集. (形式上,闭区间 [a, b](其中 a <= b)表示实数 x 的集合, ...
- docker安装、下载镜像、容器的基本操作
文章目录 一.docker安装与基本使用 1.docker的安装.从远程仓库下载镜像 2.配置docker国内源 二.创建容器 1.create i.创建容器 ii.进入容器 iii.启动容器 2.r ...