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源代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367076.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从代码内部:骆驼路由引擎第一部分

因此,最近我重新燃起了对Apache Camel工作原理的兴趣。 Camel是一种功能强大的集成工具,用途非常广泛,但是只要我投入使用,我都会忍不住想:“嗯,这到底是怎么做到的!” …猜想我只是有一个诀窍&…

各种推导式合集

推导式的套路 之前我们已经学习了最简单的列表推导式和生成器表达式。但是除此之外,其实还有字典推导式、集合推导式等等。 下面是一个以列表推导式为例的推导式详细格式,同样适用于其他推导式。 variable [out_exp_res for out_exp in input_list if o…

适用于高级Java开发人员的十大书籍

Java是当今最流行的编程语言之一。 有很多适合初学者的书籍。 但是对于那些使用Java进行过一段时间编程的人来说,其中有些人看起来有些简单和多余。 初学者的书没有带来新鲜有趣的想法。 但是,高级Java书籍并不总是一应俱全,部分原因是因为它…

Leetcode 456. 132 Pattern

题目的意思就是给你一个数组 里面一堆数,你是否能找到这样三个数,第一个数比第三个数小,第二个数最大。比如 1, 3, 2 或者 4, 9, 5 这种,数字可以不连续在一起,但是要保证顺序不变,只要有这么一组数就可以…

「起点订阅页」Checkbox 美化引发的蝴蝶效应

本文作者:任家乐 原创声明:本文为阅文前端团队 YFE 成员出品,请尊重原创,转载请联系公众号 (id: yuewen_YFE) 获取授权,并注明作者、出处和链接。 性能风暴 「据说亚马逊雨林的一只蝴蝶偶尔扇动几下翅膀,可…

python polar函数_Python可视化很简单,可是你会吗?python绘制饼图、极线图和气泡图,让我来教教你吧,一文教会!!!...

matplotlib库作为Python数据化可视化的最经典和最常用库,掌握了它就相当于学会了Python的数据化可视化,今天呢,咱们就一起来聊聊关于Python如何去绘制饼图、极线图和气泡图吧好啦,废话少说,咱们就开始吧!用…

Java中的访问者设计模式–示例教程

访客模式是行为设计模式之一 。 当我们必须对一组相似类型的对象执行操作时,将使用访问者模式。 借助访问者模式,我们可以将操作逻辑从对象移动到另一个类。 例如,假设有一个购物车,我们可以在其中添加不同类型的项目&#xff08…

函数递归与二分法

1.什么是函数递归 函数的递归调用是函数嵌套调用的一种特殊形式, 特殊在调用一个函数的过程中又直接或者间接地调用了该函数本身 递归本质就是一个循环的过程, 但是递归必须满足两个原则: 1.每进入下一层递归,问题的规模必须有所减…

使用Oracle WebLogic创建部署计划

创建部署计划 部署计划是JSR-88部署标准的一部分,尽管在该标准中未明确说明。 部署计划是一个XML文档,用于定义自定义WebLogic Server部署环境。 此配置可用于覆盖在应用程序归档文件中定义的特定设置。 有许多原因可能导致您不希望修改应用程序存档的原…

记录一个前端架构的想法

前端,真的是让我哭笑不得的职业,从几年前作为打酱油的理想职业到现在的热门职业,无疑在这个过程中,门槛变高了,而且还是非常高。一大堆的框架和库,像什么vue啦、react啦、angular啦、webpack啦等等等等。让…

java 编程原理_Java网络编程 -- 网络编程基础原理

Hello,今天记录下 Java网络编程 --> 网络编程基础原理。一起学习,一起进步。继续沉淀,慢慢强大。希望这文章对您有帮助。若有写的不好的地方,欢迎评论给建议哈!初写博客不久,我是杨展浩。这是我的第十五…

JavaScript基础之--- 深拷贝与浅拷贝

理解深拷贝和浅拷贝之前,先来看一下JavaScript的数据类型。 1、基本类型和引用类型 //案例1 var num1 1, num2 num1; console.log(num1) //1 console.log(num2) //1 num2 2; //修改num2 console.log(num1) //1 console.log(num2) //2 //案例2 var obj1 {x: 1, …

vue菜鸟从业记:完成项目最后一公里之真机测试和打包上线

最近我朋友王小闰他们公司的项目开发已经进入收尾阶段,前后端并行开发的差不多了,联调也调过了,上篇文章里也讲到了,所谓联调,就仿佛在说“我也不知道我的接口文档写的对不对,我们验证一下吧?我…

血淋淋的事实告诉你:你为什么不应该在JS文件中保存敏感信息

在JavaScript文件中存储敏感数据,不仅是一种错误的实践方式,而且还是一种非常危险的行为,长期以来大家都知道这一点。 而原因也非常简单,我们可以假设你为你的用户动态生成了一个包含API密钥的JavaScript文件: apiCall…

从零开始搭建一个vue.js的脚手架

在谷歌工作的时候,我们要做很多界面的原型,要求快速上手,灵活运用,当时用的一些现有框架,比如angular,太笨重了——尤雨溪(Vue.js 作者) vue.js是现在一个很火的前端框架&#xff0c…

更安全的Web通信HTTPS

1. HTTP协议存在的问题 阅读本篇需要对HTTP协议有最基本的了解。 借用《图解密码技术》里的图片,我们以如下一个购物场景开始介绍: 在网购过程中,如果使用纯粹的HTTP协议,那么用户的账号密码,信用卡,银行卡…

CSS入门指南——页面的水平居中

我们经常看到这样的网页,即内容水平居中在屏幕中间,左右留白。我们来给这样的布局起个名字——水平居中布局 其实要实现这样的布局十分简单,即给中间部分一个宽度,设置margin左右值为auto,如,中间部分class"main&…

mysql explain的使用

一、explain返回各列的含义: 1、table:显示这一行的数据是关于那张表的 2、type:重要的列,显示连接使用了何种类型,从最好到最差的连接类型为const、eq_reg、ref、range、index、ALL 3、possible_keys:显示…

使用 Canvas 生成公众号头图

熟悉“前端晚自修”的朋友们应该知道,我们每期的头图除了上面的文字随着每期变动以外,几乎是一模一样的(因为太懒了~)。这个头图虽然丑了一点,但是也还说的过去,毕竟是我倾尽毕生艺术细胞拼出来的&#xff…

Flask mysql 模版传参_Flask渲染Jinja2模板和传参

### Flask渲染Jinja2模板和传参:1. 如何渲染模板:* 模板放在templates文件夹下* 从flask中导入render_template函数。* 在视图函数中,使用render_template函数,渲染模板。注意:只需要填写模板的名字,不需要…