axios请求超时,设置重新请求的完美解决方法
自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。
具体原因
最近公司在做一个项目, 服务端数据接口用的是Php输出的API, 有时候在调用的过程中会失败, 在谷歌浏览器里边显示Provisional headers are shown。
按照搜索引擎给出来的解决方案,解决不了我的问题.
最近在研究AOP这个开发编程的概念,axios开发说明里边提到的栏截器(axios.Interceptors)应该是这种机制,降低代码耦合度,提高程序的可重用性,同时提高了开发的效率。
带坑的解决方案一
我的经验有限,觉得唯一能做的,就是axios请求超时之后做一个重新请求。通过研究 axios的使用说明,给它设置一个timeout = 6000
axios.defaults.timeout = 6000;
然后加一个栏截器.
// Add a request interceptor
axios.interceptors.request.use(function (config) {// Do something before request is sentreturn config;}, function (error) {// Do something with request errorreturn Promise.reject(error);
});// Add a response interceptor
axios.interceptors.response.use(function (response) {// Do something with response datareturn response;}, function (error) {// Do something with response errorreturn Promise.reject(error);
});
这个栏截器作用是 如果在请求超时之后,栏截器可以捕抓到信息,然后再进行下一步操作,也就是我想要用 重新请求。
这里是相关的页面数据请求。
this.$axios.get(url, {params:{load:'noload'}}).then(function (response) {//dosomething();
}).catch(error => {//超时之后在这里捕抓错误信息.if (error.response) {console.log('error.response')console.log(error.response);} else if (error.request) {console.log(error.request)console.log('error.request')if(error.request.readyState == 4 && error.request.status == 0){//我在这里重新请求}} else {console.log('Error', error.message);}console.log(error.config);
});
超时之后, 报出 Uncaught (in promise) Error: timeout of xxx ms exceeded的错误。
在 catch那里,它返回的是error.request错误,所以就在这里做 retry的功能, 经过测试是可以实现重新请求的功功能, 虽然能够实现 超时重新请求的功能,但很麻烦,需要每一个请API的页面里边要设置重新请求。
看上面,我这个项目有几十个.vue 文件,如果每个页面都要去设置超时重新请求的功能,那我要疯掉的.
而且这个机制还有一个严重的bug,就是被请求的链接失效或其他原因造成无法正常访问的时候,这个机制失效了,它不会等待我设定的6秒,而且一直在刷,一秒种请求几十次,很容易就把服务器搞垮了,请看下图, 一眨眼的功能,它就请求了146次。
带坑的解决方案二
研究了axios的源代码,超时后, 会在拦截器那里 axios.interceptors.response 捕抓到错误信息, 且 error.code = "ECONNABORTED",具体链接
https://github.com/axios/axios/blob/26b06391f831ef98606ec0ed406d2be1742e9850/lib/adapters/xhr.js#L95-L101
// Handle timeoutrequest.ontimeout = function handleTimeout() {reject(createError('timeout of ' config.timeout 'ms exceeded', config, 'ECONNABORTED',request));// Clean up requestrequest = null;};
所以,我的全局超时重新获取的解决方案这样的。
axios.interceptors.response.use(function(response){
....
}, function(error){var originalRequest = error.config;if(error.code == 'ECONNABORTED' && error.message.indexOf('timeout')!=-1 && !originalRequest._retry){originalRequest._retry = truereturn axios.request(originalRequest);}
});
这个方法,也可以实现得新请求,但有两个问题,1是它只重新请求1次,如果再超时的话,它就停止了,不会再请求。第2个问题是,我在每个有数据请求的页面那里,做了许多操作,比如 this.$axios.get(url).then之后操作。
完美的解决方法
以AOP编程方式,我需要的是一个 超时重新请求的全局功能, 要在axios.Interceptors下功夫,在github的axios的issue找了别人的一些解决方法,终于找到了一个完美解决方案,就是下面这个。
https://github.com/axios/axios/issues/164#issuecomment-327837467
//在main.js设置全局的请求次数,请求的间隙
axios.defaults.retry = 4;
axios.defaults.retryDelay = 1000;axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {var config = err.config;// If config does not exist or the retry option is not set, rejectif(!config || !config.retry) return Promise.reject(err);// Set the variable for keeping track of the retry countconfig.__retryCount = config.__retryCount || 0;// Check if we've maxed out the total number of retriesif(config.__retryCount >= config.retry) {// Reject with the errorreturn Promise.reject(err);}// Increase the retry countconfig.__retryCount = 1;// Create new promise to handle exponential backoffvar backoff = new Promise(function(resolve) {setTimeout(function() {resolve();}, config.retryDelay || 1);});// Return the promise in which recalls axios to retry the requestreturn backoff.then(function() {return axios(config);});
});
其他的那个几十个.vue页面的 this.$axios的get 和post 的方法根本就不需要去修改它们的代码。
在这个过程中,谢谢jooger给予大量的技术支持,这是他的个人信息 https://github.com/jo0ger , 谢谢。
以下是我做的一个试验。。把axios.defaults.retryDelay = 500, 请求 www.facebook.com
如有更好的建议,请告诉我,谢谢。
github源代码
axios请求超时,设置重新请求的完美解决方法相关推荐
- axios请求失败重新发起请求_vue axios请求超时,设置重新请求的完美解决方法
//在main.js设置全局的请求次数,请求的间隙 axios.defaults.retry = 4; axios.defaults.retryDelay = 1000; axios.intercep ...
- 头脑王者服务器维护,微信头脑王者请求超时及查询服务器失败的解决方法
微信头脑王者你们知道吗?不知道也没有关系哦,以下内容是微信头脑王者请求超时及查询服务器失败的解决方法,一起来学习吧! 头脑王者请求超时怎么解决? 1.最常见的就是wifi网络环境下出现这种情况,这是因 ...
- axios请求失败重新发起请求_axios请求超时,设置重新请求的完美解决方法
自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历. 具体原因 最近公司在做一个项目, ...
- axios请求失败、请求超时重新发送请求
一. axios重新发送请求基础版(所有的请求错误,不论是请求超时还是接口请求出错都会进行重试) 以下是一个完整的文件,看懂了的话axios重试请求也就基本会了,不会的话直接复制到项目里,也可以直接调 ...
- axios请求超时自动重新请求
有时候因项目需求,要在接口请求超时或者获取数据失败时,重新请求1次,或者更多次.具体的配置步骤和方法如下: 因为是要在请求超时或者获取数据失败时,进行重新请求设置,那么我们肯定是要在请求返回拦截器里面 ...
- Action请求后台出现Response already commited异常解决方法
Action请求后台出现Response already commited异常解决方法 参考文章: (1)Action请求后台出现Response already commited异常解决方法 (2) ...
- python https请求报错:SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED] 解决方法
python爬虫,使用requests库发送https请求报错:SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED] 解决方法: imp ...
- 计算机更新配置卡住了,win10更新设置卡死怎么办|win10更新设置卡死的完美解决方法...
对于win10更新设置卡死怎么办|win10更新设置卡死的完美解决方法,很多小伙伴们都有遇到过win10更新设置卡死的问题,然而很多小伙伴们对于这个问题都感到了非常的头疼,又不知道具体该怎样才能解决, ...
- ipv4改完保存不成功_win10ip设置保存不了的完美解决方法
怎样给win10ip设置保存不了的完美解决方法,一些小伙伴们在使用win10系统设置ip的时候,居然发现win10系统ip无法设置保存,也不知道该怎么才能解决这个问题,针对这一问题,小编立马找到了解决 ...
最新文章
- Oracle PL/SQL编程学习笔记:Merge方法的使用
- sqlserver2000 mdf 文件导入
- html5怎么产生手风琴效果,Html5 js如何实现手风琴效果
- 关于STM32系列单片机中断触发时间问题
- js三级分类菜单导航
- Cocos2d-X开发中国象棋《三》開始场景的实现
- Struts2 + Spring + Hibernate 通用 Service 和 DAO
- maven私服搭建及应用
- Bean property 'preFix' is not writable or has an invalid setter method
- Flutter 使用Dart Format格式化代码
- xray安全漏洞检测(高效能)
- Win10使用系统自带命令diskpart格式化U盘
- 得知大熊哥最后一天在岗位工作今天离开有感而发
- 微信将迎来重大更新:绑定银行卡的用户请注意
- Espresso自动化测试(十一) - IdlingResource
- 【全栈接口测试进阶系列教程】入门到入职的jmeter接口测试工具实战,接口测试步骤,正则表达式jsonpath,断言,接口加密,beanshell,jdbc,jmeter+ant+jenkins
- Unreal Engine蓝图编程学习(四)
- ML - 贷款用户逾期情况分析5 - 特征工程2(特征选择)
- [笔试题记录]T01 最优高铁修建方案
- 推荐九个数据可视化工具,快速生成可视化信息
热门文章
- 同步服务老是报错_悬而未决:MYSQL配置好主从同步后没有报错,但数据一直没有同步过来是什么原因? | 学步园...
- python抓取数据时失败_爬取数据缺失的补坑,Python数据爬取的坑坑洼洼如何铲平...
- asp listview 单元格文字颜色_如何替换CAD表格中特定区域单元格中的文字?
- [转]Global exception handling in Web API 2.1 and NLog
- hdu 6194 后缀数组
- FZU Problem 2238 Daxia Wzc's problem
- .net 垃圾回收学习[How To: Use CLR Profiler][翻译学习]【2】
- Hello Blog!
- 【JOURNAL】好久了啊
- python分割字符串输出_python字符串分割