axios封装之cancelToken
axios封装之cancelToken
在真实项目中,当路由已经跳转,而上一页的请求还在pending状态,如果数据量小还好,数据量大时,跳到新页面,旧的请求依旧没有停止,这将会十分损耗性能,这时我们应该先取消掉之前还没有获得相应的请求,再跳转页面。这里axios给我们提供了一个方法。
cancelToken使用
官网方法一:
var CancelToken = axios.CancelToken;
var source = CancelToken.source();axios.get('/user/12345', {cancelToken: source.token
}).catch(function(thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// 处理错误}
});// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.');
如果我要跳转页面的话,我调用source.cance()方法就可以干掉之前这个没有请求完的请求了。
但是这个方法有个弊端,就是比较麻烦,每次都要手动去调用source.cance()方法。怎么做到全局统一管理呢?
官网给了以下方法:
还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token:
var CancelToken = axios.CancelToken;
var cancel;axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {// executor 函数接收一个 cancel 函数作为参数cancel = c;})
});// 取消请求
cancel();
根据这个方法:我们一步一步来实现它:
新建一个文件clearHttpRequest.js,内容如下:
export let httpRequestList=[];export const clearHttpRequestingList = () => {if (httpRequestList.length > 0) {httpRequestList.forEach((item) => {item()})httpRequestList = []}
}
在request.js(axios的二次封装文件)加上:
import axios from 'axios'
import { httpRequestList } from '@mixins/clearHttpRequest';//上面创建的clearHttpRequest文件
const { CancelToken } = axios;const cancelToken = new CancelToken((c) => {httpRequestList.push(c)
})
axios.create({baseURL: BASE_URL,timeout: 60000, //超时时间responseType: "json",//请求数据类型包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'withCredentials: false,//表示跨域请求时是否需要使用凭证,是true的时候,开启withCredentials后,服务器才能拿到你的cookie,当然后端服务器也要设置允许你获取你开启了才有用headers: {'Content-Type': 'application/x-www-form-urlencoded'},cancelToken
})
然后路由拦截器文件里面加上:
import { clearHttpRequestingList } from '@mixins/clearHttpRequest';//上面创建的clearHttpRequest文件clearHttpRequestingList();//这个方法写到路由拦截器的方法里面
这样就实现了每次路由跳转之前,就清空之前出于pending状态的请求,优化了性能。
如下图所示:
总结
视频学习中和度娘并不提到CancelToken这个东西,单独查CancelToken才知道这个对性能优化有很大帮助,axios封装必须把这个加上去呀!
本文章也是受到别的文章启发,不过是优化了一下.
axios封装之cancelToken相关推荐
- axios post object object_一套全面又有实际意义的axios封装+api管理方案
[toc] 前言 功能点 此文主要是基于vuecli3项目中axios封装及api管理的实践记录及过程中的踩坑收获,功能基本都是根据工作中需求实现.需求背景是,在同一套请求配置下,实现以下主要功能: ...
- axios 取消请求:CancelToken
目录 示例代码: 步骤操作: 优化取消请求(细化错误问题): 示例代码: axios 请求拦截器中使用取消请求: 示例代码: axios 批量发送请求: 注意:此方法(CancelToken),官方已 ...
- axios post body参数_Vue开发中的一些问题(axios封装)
关于Vue开发的问题(axios封装) 在博客中查找vue的axios封装,发现其中案例还是很多的,自己项目中有些需求不够. 比如 1.Content-Type 请求头 application/x-w ...
- axios设置text html,axios封装动态设置Content-Type
问题如下: 有个问题 是这样的 后台给的API接口 请求类型有两种 'Content-Type': 'application/json' 'Content-Type': 'application/x- ...
- vue中将axios封装
在平时写项目中,经常会遇到组件调用同一个接口或者不同接口 import axios from "axios"axios({url: "https://autumnfish ...
- vue axios封装 获取微信公众号用户的openid
目录 axios封装 openid vue vue+ts axios封装 一般会在项目的src目录中,新建一个文件夹,作为网络请求模块,用来封装axios, 创建axios实例: axios.crea ...
- ajax和axios封装
Ajax 1.ajax理解 ajax是async JavaScript and xml /异步的js和xml 主要用来实现页面的局部刷新 在浏览器里内置了ajxa的核心对象的:XMLHttpRequ ...
- vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
- 前端学习笔记(16)-Axios封装
1.Axios介绍 1.1 概述 Vue前端开发少不了向服务器请求数据,我们选择axios插件,他是一款功能强大,且易用的网络请求工具. 1.2 全称 ajax i/o system 1.3 功能介绍 ...
- axios封装(通用)
axios封装 封装目的: 避免重复设置超时时间,请求头,错误处理:提高代码质量 主要文件目录: post/index.js /** @Descripttion: axios 封装* @version ...
最新文章
- Java中获取数据库中两个时间的相差秒数
- SchemaCrawler 9.3 发布
- oracle用户名密码过期引起的网站后台无法登录
- echart vue 图表大小_vue里echarts自适应窗口大小改变
- 数字图像处理学习笔记(二):SIFT(尺度不变特征变换)算法
- java 展现层框架_spring快速入门例子教程:06展现层
- 高通:预计未来几年向苹果公司出售的芯片将减少
- MySQL工作中的实际用_总结工作中经常用到的mysql基础知识
- 关于time_wait状态的理解
- 快解析结合绿盾文档加密软件
- python 汉诺塔问题_Python汉诺塔问题
- 计算机密码输入正确,Win10输入正确密码却提示“密码不正确”如何解决
- pscc显示无法访问adobe服务器,Adobe Photoshop 提示无法加载扩展,因为它未经正确签署错误提示解决方案...
- 忆过去 想未来 人有情
- 2022-02-16 工作记录--Swiper-实现跑马灯效果:鼠标经过时停止滑动,鼠标离开后继续滑动
- js网状特效源代码下载
- redux和react-redux
- 十七.用户注册 ---- 图形验证码 2021-04-03
- 关于TCP/IP通信协议的一些见解
- 29、栈的压入、弹出序列