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取消请求内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue怎么引入axios(如何用vue封装axios请求)
- vue引入axios(vue封装axios的几种方法)
- axios并发请求数据(项目中如何使用axios过滤多次重复请求详解)
- axios实现原理(项目中Axios二次封装实例Demo)
- axios原理和实现(GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析)
- axios如何跨域请求(axios取消请求与避免重复请求)
- axios自动重复提交请求(Axios取消重复请求的方法实例详解)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- axios调用接口(如何实现axios的自定义适配器adapter)
- axios 请求前校验参数(js实现axios限制请求队列)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- axios封装怎么实现(axios的简单封装以及使用实例代码)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- 泰国美女(泰国人妖和女性如何区分)
- 泰国旅游业怎么样(泰国的旅游产业)
- 越南新娘(越南新娘婚介网站)
- 越南新娘(越南新娘骗婚套路流程)
- 菲律宾游学(菲律宾游学中介机构)
- 菲律宾美食(菲律宾美食排行榜前十名)
热门推荐
- python模块使用方法(详解python的argpare和click模块小结)
- python学生管理系统与数据库(python学生管理系统学习笔记)
- php换行乱码(php输出文字乱码的解决方法)
- dockerswarm网络模式(详解Docker Swarm概念与用法)
- docker远程部署(Docker内网穿透frp部署实现过程解析)
- python高级面试题及答案(python面试题小结附答案实例代码)
- 阿里云对象存储oss请求次数(阿里云服务器本地上传到OSS对象存储节点)
- 微信小程序获取手机信息(微信小程序获取手机号的踩坑记录)
- docker是k8s 编排必备容器工具(Docker部署ELK7.3.0日志收集服务最佳实践)
- php返回数组值最大的键(PHP实现通过二维数组键值获取一维键名操作示例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9