码迷,mamicode.com
首页 > 移动开发 > 详细

axios中取消请求

时间:2018-11-29 21:46:18      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:飞翔   对象   data   erro   fun   设置   url   code   链接   

在平时的开发过程中,我们会经常遇到菜单切换的问题,在一些切换频率较低的情况下,在切换到另一个页面的时候,上一个页面基本没有未完成的异步请求,即时有,在一些情况下也是可以忽略的。但是,在一些切换频率较高的页面中,如果我们不处理这些未完成的请求,那么这些请求会极大的影响页面的性能,甚至导致之后的请求超时。

如果需要断开Javascript的ajax请求,一种是通过设置时间,超时自动断开,另一种我们可以调用XMLHttpRequest对象上的abort方法。

在使用Vue的过程中,大多是使用axios来发起http请求,那么在axios中我们要怎么中止某个http请求呢?遍寻网上教程无果后,想起了革命先辈的名言–自己动手,丰衣足食。好了,我要秀英语水平了,那么我们只好自己看英文文档了。打开axios的github主页,果然文档才是我们的好帮手,很快就找到解决问题的办法。

 1 var CancelToken = axios.CancelToken;
 2 var source = CancelToken.source();
 3 
 4 axios.get(‘/user/12345‘, {
 5 cancelToken: source.token
 6 }).catch(function(thrown) {
 7 if (axios.isCancel(thrown)) {
 8 console.log(‘Request canceled‘, thrown.message);
 9 } else {
10 // handle error
11 }
12 });
13 
14 // cancel the request (the message parameter is optional)
15 source.cancel(‘Operation canceled by the user.‘);

查找axios的文档,发现可以通过使用CancelToken来取消axios发起的请求,我们可以自己写一段代码来验证。

 1 var app = new Vue({
 2   el: ‘#app‘,
 3   data: {
 4     message: ‘Hello Axios!‘,
 5     source: null
 6   },
 7   methods: {
 8     sendRequest() {
 9       this.source = this.axios.CancelToken.source(); // 这里初始化source对象
10       this.axios.get(url, {
11         cancelToken: this.source.token // 这里声明的cancelToken其实相当于是一个标记,
12                                        // 当我们要取消请求的时候,可以通过这个找到该请求
13       })
14       .then(res => {
15         // 你的逻辑
16       })
17       .catch(res => {
18         // 如果调用了cancel方法,那么这里的res就是cancel传入的信息
19         // 你的逻辑
20       })
21     },
22     cancel() {
23       this.source.cancel(‘这里你可以输出一些信息,可以在catch中拿到‘)
24     }
25   }
26 })

 

---------------------
作者:张飞翔
来源:转载
原文:https://blog.csdn.net/sir1241/article/details/76099529
版权声明:本文为博主原创文章,转载请附上博文链接!

axios中取消请求

标签:飞翔   对象   data   erro   fun   设置   url   code   链接   

原文地址:https://www.cnblogs.com/913815ccmm/p/10040923.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!