解决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 相关文章推荐
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP初学入门
2006/11/19 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
JS的数组迭代方法
2015/02/05 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
python删除某个字符
2018/03/19 Python
python安装scipy的方法步骤
2019/06/26 Python
pycharm导入源码的具体步骤
2020/08/04 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
安全生产投入制度
2014/01/29 职场文书
教师专业自荐信
2014/05/31 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技