vue接口总是请求超时_解决在vue中axios请求超时的问题
自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。
具体原因
最近公司在做一个项目, 服务端数据接口用的是java输出的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 sent
returnconfig;
},function(error) {//Do something with request error
returnPromise.reject(error);
});//Add a response interceptor
axios.interceptors.response.use(function(response) {//Do something with response data
returnresponse;
},function(error) {//Do something with response error
returnPromise.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",具体链接
//Handle timeout
request.ontimeout = functionhandleTimeout() {
reject(createError('timeout of ' + config.timeout + 'ms exceeded', config, 'ECONNABORTED',
request));//Clean up request
request = 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= true
returnaxios.request(originalRequest);
}
});
这个方法,也可以实现得新请求,但有两个问题,1是它只重新请求1次,如果再超时的话,它就停止了,不会再请求。第2个问题是,我在每个有数据请求的页面那里,做了许多操作,比如 this.$axios.get(url).then之后操作。
完美的解决方法
以AOP编程方式,我需要的是一个 超时重新请求的全局功能, 要在axios.Interceptors下功夫,在github的axios的issue找了别人的一些解决方法,终于找到了一个完美解决方案,就是下面这个。
//在main.js设置全局的请求次数,请求的间隙
axios.defaults.retry = 4;
axios.defaults.retryDelay= 1000;
axios.interceptors.response.use(undefined,functionaxiosRetryInterceptor(err) {var config =err.config;//If config does not exist or the retry option is not set, reject
if(!config || !config.retry) returnPromise.reject(err);//Set the variable for keeping track of the retry count
config.__retryCount = config.__retryCount || 0;//Check if we've maxed out the total number of retries
if(config.__retryCount >=config.retry) {//Reject with the error
returnPromise.reject(err);
}//Increase the retry count
config.__retryCount += 1;//Create new promise to handle exponential backoff
var backoff = new Promise(function(resolve) {
setTimeout(function() {
resolve();
}, config.retryDelay|| 1);
});//Return the promise in which recalls axios to retry the request
return backoff.then(function() {returnaxios(config);
});
});
其他的那个几十个.vue页面的 this.$axios的get 和post 的方法根本就不需要去修改它们的代码。
参考文章:https://juejin.im/post/5abe0f94518825558a06bcd9
vue接口总是请求超时_解决在vue中axios请求超时的问题相关推荐
- vue 不生效 打包 样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
- 解决在vue中axios请求超时的问题
解决在vue中axios请求超时的问题 参考文章: (1)解决在vue中axios请求超时的问题 (2)https://www.cnblogs.com/zhouyangla/p/8757149.htm ...
- vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例 实现了设置统一请求头添加token, 其中to ...
- 前端请求restful风格接口怎么传参_浅谈Restful API 的请求规范
前言 在SpringMVC架构上进行开发,开发者一直在使用jsp.valocity或者其他页面模版作为表现层面,前端工程师需要将设计师的设计图转换为静态的html页面,然后交付给后端将静态的html页 ...
- mysql数据库断开连接_解决mysql服务器在无操作超时主动断开连接的情况
我们在使用mysql服务的时候,正常情况下,mysql的设置的timeout是8个小时(28800秒),也就是说,如果一个连接8个小时都没有操作,那么mysql会主动的断开连接,当这个连接再次尝试查询 ...
- mysql 查询语句超时_解决SQL查询总是 超时已过期
1.由于数据库设计问题造成SQL数据库新增数据时超时 症状: Microsoft OLE DB Provider for SQL Server 错误 '80040e31' ([ODBC SQL Ser ...
- vue中axios请求的封装
axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以 ...
- ajax jq 图片上传请求头_全面分析前端的网络请求方式:Ajax ,jQuery ,axios,fetch
链接:https://juejin.im/post/5c9ac607f265da6103588b31 一.前端进行网络请求的关注点 大多数情况下,在前端发起一个网络请求我们只需关注下面几点: 传入基本 ...
- c3p0 服务启动获取连接超时_微服务架构中的熔断、降级
微服务架构中熔断和降级是保证服务高可用的一项重要功能点,微服务区别于一体化项目的最大区别也再于熔断和降级,很多微服务项目的开发人员对熔断的理解就是当服务不可用的时候,为了让整体服务可以正常运行,需要让 ...
- vue中axios请求拦截、响应拦截的配置
1.在vue项目的 src/ 文件夹下新建一个文件夹为 plugins,然后在 plugins/ 下新建 axios.js 文件,写入如下代码 import axios from 'axios' im ...
最新文章
- DHCP欺骗(DHCP Sproofing)
- [administrative] windows 下制作USB启动盘的工具
- javafx 图片作按钮_JavaFX - 按钮编辑树视图节点文本
- 江西中医院大学计算机学院,大家好!给大家介绍一下,这是我的大学@江西中医药大学...
- 如何为从1到10万用户的应用程序,设计不同的扩展方案?
- Mangos自己制作装备
- JZOJ 5931. 【NOIP2018模拟10.27】冒泡排序
- 130 道 Kubernetes + Docker + DevOps 大厂面试题及知识点详解
- 【Android】Android中ContentProvider组件详解
- raid配置ssd为缓存_超融合硬件选配推荐指南 | 第三期:SSD 与 HDD
- linux 禁用smb服务,Samba 4.11 发布,更好的可扩展性与默认禁用SMB1
- azure夜校培训第四场3月8日18:00---网络服务
- 怎样在Delphi中屏蔽Flash控件的右键弹出菜单
- Oracle存储过程的异常处理
- 最新hadoop+hbase+spark+zookeeper环境安装(vmmare下)
- Mybatis-学习笔记(2)Mybatis配置文件
- 2013年大数据行业应用展望报告
- javascript 纯前端实现汉字转拼音 —— pinyin-pro 库
- 阿里网盘rar再打包分享工具
- 李飞飞:我更像物理学界的科学家,而不是工程师|深度学习崛起十年
热门文章
- GraphRNN: Generating Realistic Graphs with Deep Auto-Regressive Models
- 天地三才阵——【Java三大特征】
- 运营商精准大数据外呼系统
- Windows 基本操作命令
- 【渝粤教育】电大中专电商运营实操 (4)作业 题库
- 【OR】ADMMRisk Parity Portfilio Model
- STM32单片机的学习
- [2019 icpc徐州] H.Yuuki and a problem 带修改的主席树(主席树+树状数组)
- CAN波特率与负载率
- 盘点8个高效方法提高睾酮水平