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取消请求内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- axios实现原理(项目中Axios二次封装实例Demo)
- axios如何跨域请求(axios取消请求与避免重复请求)
- axios并发请求数据(项目中如何使用axios过滤多次重复请求详解)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- axios 请求前校验参数(js实现axios限制请求队列)
- axios原理和实现(GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析)
- axios调用接口(如何实现axios的自定义适配器adapter)
- axios封装怎么实现(axios的简单封装以及使用实例代码)
- vue引入axios(vue封装axios的几种方法)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- vue怎么引入axios(如何用vue封装axios请求)
- axios自动重复提交请求(Axios取消重复请求的方法实例详解)
- 东南亚安全吗(好不好挣钱)
- 潘长江小品《照亮全家福》台词剧本完整版(潘长江小品照亮全家福台词剧本完整版)
- 一窗通办政务服务小品剧本(一窗通办政务服务小品剧本)
- 刘韬涛丁子贺小品《根治低头族》台词剧本(刘韬涛丁子贺小品根治低头族台词剧本)
- 看完《夺冠》,黄渤的演技我实在夸不起来,彭昱畅反令人惊喜(黄渤的演技我实在夸不起来)
- 黄渤泪目 我的痴呆父亲,我内心永远的痛(黄渤泪目我的痴呆父亲)
热门推荐
- springboot内置tomcat启动过程(Tomcat启动springboot项目war包报错:启动子级时出错的问题)
- docker分配容器资源(Mac为docker和kubectl添加自动补全命令的方法)
- mysql索引如何使用(MySQL 索引和数据表该如何维护)
- navicat注册和激活码(Navicat12.1系列破解激活教程亲测有效)
- opencv人脸识别算法(python利用Opencv实现人脸识别功能)
- html中hr标签
- jquery留言板代码(JavaScript实现留言板添加删除留言)
- udp 常用端口(UDP DUP超时UPD端口状态检测代码示例)
- python线程池怎么设置(python自定义线程池控制线程数量的示例)
- 如何增大docker内存使用(docker 内存监控与压测方式)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9