解决vue中axios设置超时(超过5分钟)没反应的问题


Posted in Javascript onSeptember 04, 2020

(chrome环境)在做项目的时候,由于做大数据可视化界面,后台接口查询数据往往会比较久(上百万的数据量),导致vue项目axios请求超时timeout设置就比较大。开始设置超时未3分钟时没有问题(这里我设置超时弹窗了),可设置超时未6分钟时,却在五分钟左右弹出请求超时,但明明设置tiemout=6x60x1000。

于是通过资料查询,了解到Chrome浏览器,默认请求超时为五分钟,所以导致上诉现象产生,可如何在vue中修改浏览器超时?

直接上代码:

我们可以在config文件中index.js,配置timeout即可,这里是vue2环境(vu3相同)

proxyTable: {
    '/searchPerson': {
      target: '接口代理地址',
      timeout: 6*60*1000, //设置超时
      changeOrigin: true
     },
     '/taskResult': {
      target: ' 接口代理地址',
      timeout: 6*60*1000,  //设置超时
      changeOrigin: true
     }
     
  },

在index.js配置超时时间后,记得重启服务,不然会没反应

补充知识:Vue项目请求时间过长导致断开连接的问题

对于laravel,已经无力吐槽,不能支持多线程是个永远的痛,如果这个问题在java中,直接另辟一个线程就可以搞定,分分钟就可以返回数据!

问题:上传视频至阿里云oss,大文件莫名的会上传两次,而且前端每次大约在4.1min的时候断开连接

思路:因为在阿里云的控制台可以看到同一个视频被上传了两次,猜测是前端框架或者后端框架做了一次链接retry

解决方案:

1.后端框架(laravel)验证:

public function testTimeOut(){
 
    sleep(400);
    return 'sleep await';  
}

解决vue中axios设置超时(超过5分钟)没反应的问题

可以看出后台在400s之后可以返回数据,基本可以排除是后台laravel框架的问题

2.前端框架(Vue)验证

解决vue中axios设置超时(超过5分钟)没反应的问题

原先配置文件默认超时时长为2min(这里也是猜测)

然后开始上传视频,控制台发送upload请求,刷新阿里云控制台会看到文件正在上传,奇妙的事情发生了控制报错net err_empty_response,然后在刷新阿里云控制台会发现刚才上传的视频已经完成,但是还有同样的一个视频正在上传,所以猜测在前端没有得到response后,又尝试了请求了一次,导致视频会被上传两次!所以可以断定问题出在前端框架上。

经过一顿的测试和研究发现,

解决vue中axios设置超时(超过5分钟)没反应的问题

这里设置timeout后可以有效的解决刚才的问题!

以上这篇解决vue中axios设置超时(超过5分钟)没反应的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
原生js简单实现放大镜特效
May 16 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
在vue中axios设置timeout超时的操作
Sep 04 #Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 #Javascript
JavaScript中的执行环境和作用域链
Sep 04 #Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 #Javascript
详解JavaScript数据类型和判断方法
Sep 04 #Javascript
vue将data恢复到初始状态 && 重新渲染组件实例
Sep 04 #Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 #Javascript
You might like
浅谈php自定义错误日志
2015/02/13 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
js中this用法实例详解
2015/05/05 Javascript
js获取form的方法
2015/05/06 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
PyQT实现多窗口切换
2018/04/20 Python
python 以16进制打印输出的方法
2018/07/09 Python
Python WSGI的深入理解
2018/08/01 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
python os.path模块常用方法实例详解
2018/09/16 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
好家长事迹材料
2014/01/23 职场文书
元宵晚会主持词
2014/03/25 职场文书
五一劳动节活动总结
2015/02/09 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书