axios中取消请求

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

如果需要断开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
版权声明:本文为博主原创文章,转载请附上博文链接!

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

时间: 11-29

axios中取消请求的相关文章

在vue中使用axios发送post请求,参数方式

由于后台接收的参数格式为FormData格式, 在axios中参数格式默认为, 在传参数前,将原先官方提供的格式 改为如下: axios({ url: '../../../room/listRoomPage', method: 'post', data: {offset: 0, limit: 9999, roomCode: "", roomtypeId: 0, floorId: 0}, transformRequest: [function (data) { var oMyForm =

vue使用Axios做ajax请求

vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在要使用的文件中引入axios import axios from 'axios' 3. 使用axios做请求 可以通过向 axios 传递相关配置来创建请求, 只有 url 是必需的.如果没有指定 method,请求将默认使用 get 方法. { // `url` 是用于请求的服务器 URL url

Retrofit2.0+ RxJava 优雅的取消重复避免并取消请求(十一)

Tamic/文 地址:http://blog.csdn.net/sk719887916/article/details/54575137 前几篇主要介绍了retrofit基本使用,结合rxJava的案列,以及RxJava结合retrofit的封装,包括公用参数,局部参数请求头添加,缓存,https, 文件上下传,结果解析,异常处理等,还有一些技巧,那么还有一个比较关键的是取消问题. 两者结合技巧可点击阅读:http://blog.csdn.net/sk719887916/article/deta

Android应用中网络请求库Volley的使用

接上文,这次来说一下如何使用Volley,会给出一些范例,和原理 Volley使用 StringRequest // 初始化一个请求队列,RequestQueue是volley库的类 RequestQueue queue = Volley.newRequestQueue(this); String url ="http://www.baidu.com"; //定义一个字符串型请求队列,需要传递4个参数分别是:url, 请求的方式(get, post..),响应成功的处理函数匿名对象,

Android中客户端请求服务器端的方式讲解(一)附源码

Android中客户端请求服务器端的两种方式:Post方式和Get方式 在这里不直接赘述了,直接上源码如下: (1).Post的方式: /** * Post的请求方式 * * @param model * 请求序号 * @param paramList * 客户端请求的数据参数列表 * @return */ public JSONObject doPost(int model, List<NameValuePair> paramList) { try { // 客户端向服务器发送请求的数据 L

MVC之前的那点事儿系列(9):MVC如何在Pipeline中接管请求的?(转载)

MVC之前的那点事儿系列(9):MVC如何在Pipeline中接管请求的? 文章内容 上个章节我们讲到了,可以在HttpModules初始化之前动态添加Route的方式来自定义自己的HttpHandler,最终接管请求的,那MVC是这么实现的么?本章节我们就来分析一下相关的MVC源码来验证一下我们的这个问题. 先创建一个MVC3的Web Application,选择默认的模板以便创建以后就默认包含HomeController和AccountController.我们知道MVC要先接管请求才能通过

web过滤器中获取请求的参数(content-type:multipart/form-data)

1.前言: 1.1 在使用springMVC中,需要在过滤器中获取请求中的参数token,根据token判断请求是否合法: 1.2 通过requst.getParameter(key)方法获得参数值; 这种方法有缺陷:它只能获取  POST 提交方式中的Content-Type: application/x-www-form-urlencoded; HttpServletRequest request= (HttpServletRequest) req; String param = reque

python中http请求方法有哪些

在python开发(http://www.maiziedu.com/course/python-px/)中,我们一般通过get.post方式发送http请求,可是最近在使用python做接口测试,发现python中http请求方法有许多种,作者整理了一番,把python中http请求方法都总结了出来,分享给大家,具体内容如下所示:一.python自带库----urllib2python自带库urllib2使用的比较多,简单使用如下:import urllib2response = urllib2

struts中的请求数据自动封装

Struts 2框架会将表单的参数以同名的方式设置给对应Action的属性中.该工作主要是由Parameters拦截器做的.而该拦截器中已经自动的实现了String到基本数据类型之间的转换工作.在struts中,默认使用拦截器 <interceptor name="params" class="com.opensymphony.xwork2.interceptor.ParametersInterceptor"/> 进行请求数据自动封装,它会JSP中提交的

Android应用中网络请求库Volley的介绍

Volley 是一个HTTP的库,使用它能让Android应用网络传输的操作更加轻松,快捷.Volley的代码是托管在Android 源代码树下的一个工程,编译出来后是一个volley.jar文件.以下是Volley的特点 自动调度在代码中提交的网络请求(http) 多个网络请求的并发执行 对用户透明的磁盘或内存的缓存机制(本质是Http缓存机制) 能够支持网络请求的优先级 能在代码中,必要时轻松的取消网络请求(如activity销毁时),可以取消指定tag的网络请求,或按某种机制分类的网络请求