解决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 相关文章推荐
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
javascript实现下雨效果
Mar 27 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
jQuery操作css样式
May 15 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
vue分页插件的使用方法
Dec 25 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简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
采用call方式实现js继承
2014/05/20 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
javascript实现下拉菜单效果
2021/02/09 Javascript
Python读写docx文件的方法
2018/05/08 Python
python3实现多线程聊天室
2018/12/12 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
浅谈Python 函数式编程
2020/06/20 Python
.NET是怎么支持多种语言的
2015/02/24 面试题
机械系大学毕业生推荐信
2013/11/27 职场文书
护士毕业实习感言
2014/03/05 职场文书
集中采购方案
2014/06/10 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
给病人的慰问信
2015/03/23 职场文书
小学科学课教学反思
2016/02/23 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
Java线程的6种状态与生命周期
2022/05/11 Java/Android