axios并发请求数据(项目中如何使用axios过滤多次重复请求详解)
axios并发请求数据
项目中如何使用axios过滤多次重复请求详解目录
- 一、前言:
- 这个情况下,我们通常的做法有两种:
- 二、CancelToken类
- 最终效果
- 总结
我们在web应用开发过程当中,经常会遇到一个时刻发起了多个请求的场景
这个情况下,我们通常的做法有两种:
- 可以在请求时show一个loading,阻止用户操作。
- 或者人为加个变量,做一个请求的节流
我们的项目中,目前大部分情况也是采用以上两种方式做的。今天来介绍一个新的方式。
二、CancelToken类我们之前实例化一个Promise,这个对象是否成功与否,是无法在函数外部决定的,这里边使用要用到一个小窍门,可以让一个promise 和resolve分离。任何时机都可以触发resolve:
// 一个promise let resolvePromise let p = new Promise((resolve, reject) => { resolvePromise = resolve }) // 这样在外部执行 resolvePromise()
ok,有了这个前提,我们需要借助axios.CancelToken这个类。
这个类相当于在每次请求的时候开启另一个promise和当前的请求形成一个promise.race(请求p1,取消请求p2),在promise中的resolve方法赋值给了一个外部的变量去接收。我们可以根据需求,人为决定是否取消前次请求。其实这就类似,原来我们写fetch封装接口超时的Promise.race类似。
cancelToken中也提供了相应的static方法source用来生成一个cancelToken和一个cancel方法其实就是这个promise的一个resolve。
CancelToken.source = function source() { var cancel; // var token = new CancelToken(function executor(c) { cancel = c; }); return { token: token, cancel: cancel, };
根据我们常用的的缓存方式,我们可以声明一个map来存储每次请求的url,同时存储对应的cancel方法。
// 声明一个全局map const pendingHttp = new Map() // axios中内置的CancelToken类 const CancelToken = axios.CancelToken function addApi (config) { config.cancelToken = new CancelToken((cancel) => { const url = config.url console.log(pendingHttp) if (!pendingHttp.has(url)) { pendingHttp.set(url, cancel) } }) } function cancelApi (config) { const url = config.url if (pendingHttp.has(url)) { // 如果在 pending 中存在当前请求标识,需要取消当前请求,并且移除 const cancel = pendingHttp.get(url) cancel(url + '取消了') pendingHttp.delete(url) // 清空当前url的缓存 } }
- 要特殊注意,要想取消掉一个请求,需要在config上添加cancelToken这个属性赋值为CancelToken的实例。否则cancel不掉。
就像操作定时器一样,要先尝试取消上一次,然后再开启下一次
httpService.interceptors.request.use(config => { cancelApi(config) addApi(config) // 本地调试的时候,是跨域的情况,加请求头会有限制(此处是项目代码无关紧要) const { headers = {} } = config; const { globalObj = {} } = window Object.assign(headers, globalObj, { from }) return config }, error => { console.log(error) return Promise.reject(error) })
然后还有一种可能性,第一次请求已经返回了,又发起了相同的一次请求,所以在response里边也要cancelApi一下。
httpService.interceptors.response.use( response => { cancelApi(response.config) sentryCatchApi(response) }, error => { // 请求超时 if (error.message.includes('timeout')) { // 判断请求异常信息中是否含有超时timeout字符串 Toast.error({ text: '网页请求超时,请刷新重试~' }) } sentryCatchApi(error) return Promise.reject(error) } )
我们需要注意一点,cancel其实就是resolve,我们cancel执行时候传入的参数,会最终在response的error回调中,作为参数返回,这样我们的捕捉错误的方法可能会有报错。
// 假设我们的error方法是这样封装的。 来看一下sentryCatchApi error => { sentryCatchApi(error) return Promise.reject(error) } // 由于这个方法需要接收一个对象,但是我们cancel取消请求的情况下,返回的是一个字符串,这时就报错了。 function sentryCatchApi (res) { try { res = res || {} const resData = res.data || {} Sentry.captureException(JSON.stri.jpg" alt="axios并发请求数据(项目中如何使用axios过滤多次重复请求详解)" border="0" />
需要使用isCancel这个api
error => { if (axios.isCancel(error)) return console.log('请求被取消了', error.message) sentryCatchApi(error) return Promise.reject(error) }
最终效果
控制台也没有任何报错啦。(后续完善到项目中)
总结到此这篇关于项目中如何使用axios过滤多次重复请求的文章就介绍到这了,更多相关axios过滤多次重复请求内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- axios原理和实现(GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析)
- axios自动重复提交请求(Axios取消重复请求的方法实例详解)
- vue引入axios(vue封装axios的几种方法)
- axios调用接口(如何实现axios的自定义适配器adapter)
- axios如何跨域请求(axios取消请求与避免重复请求)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- axios并发请求数据(项目中如何使用axios过滤多次重复请求详解)
- vue怎么引入axios(如何用vue封装axios请求)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- axios封装怎么实现(axios的简单封装以及使用实例代码)
- axios 请求前校验参数(js实现axios限制请求队列)
- axios实现原理(项目中Axios二次封装实例Demo)
- 富士胶片 中国 我们对上海的信心没有任何改变(富士胶片中国)
- 赢麻了 富士公布2021年度财报 营利同比增长240(富士公布2021年度财报)
- 医事文化谈屑 | 古人的名 字 号(医事文化谈屑古人的名)
- ()
- 网友很惭愧,自己写了很多年的字,到头来还不如一名小学生写的好(自己写了很多年的字)
- 中华第一楷 张瑞龄 86岁高龄,苦练楷书71年,一幅字卖593万(中华第一楷张瑞龄)
热门推荐
- mysql常见错误分析(分析MySQL抛出异常的几种常见解决方式)
- 利用前端做扫雷游戏(js实现经典扫雷游戏)
- dedecms官方安装手册(Linux下安装DedeCMS及安全设置教程)
- h5微信手机端debug模式(iOS微信H5页面橡皮回弹效果的踩坑记录)
- 常用JS验证函数
- sqlserver降序排列(SQL SERVER临时表排序问题的解决方法)
- 容器之间的通信docker(Docker容器互访的三种方法)
- python 二叉树的深度遍历(python 将有序数组转换为二叉树的方法)
- python3有哪些内置模块(Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析)
- css3边框讲解(详解css3 object-fit属性)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9