axios如何跨域请求(axios取消请求与避免重复请求)
类别:编程学习 浏览量:228
时间:2021-10-23 10:35:28 axios如何跨域请求
axios取消请求与避免重复请求目录
- 起源
- 现状
- 取消请求 cancelToken
- 修改后的请求方法
- 避免重复请求
- 总结
某个页面需要下载全部数据的功能,下载数据量大,接口延迟长.....
某个页面加载初始数据量延长长,但单个检索快速,出现初始数据加载中时,检索接口返回,初始数据后续返回覆盖了检索数据的展示....
这些情况需要我们:
- 能够手动取消/终止请求Request。
- 某些页面接口同时只能有一个在请求。
系统基于老哥花裤衩开源的vue-element-admin做的二次开发,其中的请求采用的是axios,其中封装的request.js关键代码如下所示:
// create an axios instance const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url withCredentials: true, // send cookies when cross-domain requests timeout: 500000, // request timeout transformRequest: [function(data) { // 对 data 进行任意转换处理 return Qs.stringify({ ...data }, // 数组的转换 { arrayFormat: 'brackets' }) }] }) // request interceptor service.interceptors.request.use( config => { // do something before request is sent if (store.getters.token) { // let each request carry token // ['X-Token'] is a custom headers key // please modify it according to the actual situation config.headers['token'] = getToken() } return config }, error => { // do something with request error console.log(error) // for debug return Promise.reject(error) } )
发起请求的方法:
export function remoteApi(data) { return request({ url: '/api', method: 'post', data }) }
其官方文档:取消:
const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 处理错误 } }); axios.post('/user/12345', { name: 'new name' }, { cancelToken: source.token }) // 取消请求(message 参数是可选的) source.cancel('Operation canceled by the user.');
export function remoteApi(data, cancelToken) { return request({ url: '/api', method: 'post', cancelToken, data }) }
实际请求时,创建cacelToken:
// 组件方法内 this.cancelToken = CancelToken.source() remoreApi(data, this.cancelToken).then(....).catch(....).finally(....)
需要取消请求时,执行:
// 组件方法内 this.cancelToken.cancel('取消下载')
避免一个接口的重复请求,以免延时长的接口返回数据覆盖另一个接口的返回数据,造成数据显示错误。思路也相对简单,使用一个全局Map存储请求标识与对应的cancelToken。请求,在发起请求前,按照请求标识,唤起对应cancelToken的cancel方法,然后再发出新请求,即可满足条件。
总结到此这篇关于axios取消请求与避免重复请求的文章就介绍到这了,更多相关axios取消请求内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- vue引入axios(vue封装axios的几种方法)
- axios 请求前校验参数(js实现axios限制请求队列)
- vue怎么引入axios(如何用vue封装axios请求)
- axios调用接口(如何实现axios的自定义适配器adapter)
- axios实现原理(项目中Axios二次封装实例Demo)
- axios如何跨域请求(axios取消请求与避免重复请求)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- axios并发请求数据(项目中如何使用axios过滤多次重复请求详解)
- axios原理和实现(GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析)
- axios自动重复提交请求(Axios取消重复请求的方法实例详解)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- axios封装怎么实现(axios的简单封装以及使用实例代码)
- 原创图画书,以儿童视角讲述中国故事(以儿童视角讲述中国故事)
- 八月再见 愿你岁月不扰,余生静好(八月再见愿你岁月不扰)
- 赏读 八月再见,九月你好(赏读八月再见九月你好)
- 散文 八月再见,九月,我在风中等你(散文八月再见九月)
- 8月再见 9月你好(8月再见)
- 魔兽世界 设计师爆料,原始版本并无PVP,跨阵营属于返璞归真(魔兽世界设计师爆料)
热门推荐
- mysql数据表怎么复制(MySQL 复制表的方法)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- 创建数据库入门教程mysql(MySQL数据库安装教程一学就会)
- python类定义(浅谈python新式类和旧式类区别)
- python怎么转换jar包(利用python脚本如何简化jar操作命令)
- python列表中的数组(Python3.4学习笔记之列表、数组操作示例)
- python类继承和封装(Python面向对象程序设计类的封装与继承用法示例)
- 排序算法口诀php(PHP快速排序算法实现的原理及代码详解)
- python简易翻译器的运行(Python3.6实现带有简单界面的有道翻译小程序)
- 云服务器无法操作(云服务器登录连接失败解决方案)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9