解决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 相关文章推荐
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
Javascript玩转继承(三)
May 08 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
JS不完全国际化&本地化手册 之 理论篇
Sep 27 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
在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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
给海燕B411配件机起死回生配上件
2021/03/02 无线电
隐藏你的.php文件的实现方法
2007/03/19 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
PHP防止跨域提交表单
2013/11/01 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
js制作提示框插件
2020/12/24 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
python中list常用操作实例详解
2015/06/03 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
学术会议通知范文
2015/04/15 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android
MySql分区类型及创建分区的方法
2022/04/13 MySQL