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

 更新时间:2020年09月04日 09:41:20   作者:七侠剑客  
这篇文章主要介绍了解决vue中axios设置超时(超过5分钟)没反应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

(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';  
}

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

2.前端框架(Vue)验证

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

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

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

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

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

相关文章

  • 第一个Vue插件从封装到发布

    第一个Vue插件从封装到发布

    这篇文章主要为大家详细介绍了第一个Vue插件从封装到发布的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Vue列表如何实现滚动到指定位置样式改变效果

    Vue列表如何实现滚动到指定位置样式改变效果

    这篇文章主要介绍了Vue列表实现滚动到指定位置样式改变效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • JavaScript之Vue.js【入门基础】

    JavaScript之Vue.js【入门基础】

    本文主要介绍一下Vue.js并附上在Node.js环境下搭建一个简单的Demo实例代码。条理清晰,有助于阅读和理解。有需要的朋友可以看下
    2016-12-12
  • vue3数据可视化实现数字滚动特效代码

    vue3数据可视化实现数字滚动特效代码

    这篇文章主要介绍了vue3数据可视化实现数字滚动特效,实现思路是使用Vue.component定义公共组件,使用window.requestAnimationFrame(首选,次选setTimeout)来循环数字动画,详细代码跟随小编一起看看吧
    2022-09-09
  • 使用vue实现玉兔迎春图高亮示例详解

    使用vue实现玉兔迎春图高亮示例详解

    这篇文章主要为大家介绍了使用vue实现玉兔迎春图高亮示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • vue前后端端口不一致的问题解决

    vue前后端端口不一致的问题解决

    本文主要介绍了vue前后端端口不一致的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • vue中axios的二次封装实例讲解

    vue中axios的二次封装实例讲解

    在本篇文章里小编给大家整理了关于vue中axios的二次封装实例以及相关知识点总结,需要的朋友们可以学习下。
    2019-10-10
  • 详解通过JSON数据使用VUE.JS

    详解通过JSON数据使用VUE.JS

    本篇文章主要介绍了详解通过JSON数据使用VUE.JS,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vue项目打包发布到Nginx后无法访问后端接口的解决办法

    vue项目打包发布到Nginx后无法访问后端接口的解决办法

    这篇文章主要给大家介绍了关于vue项目打包发布到Nginx后无法访问后端接口的解决办法,记录一下项目需要注意的地方,方便以后快速使用,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • 快速理解Vue路由导航守卫

    快速理解Vue路由导航守卫

    这篇文章主要介绍了快速理解Vue路由导航守卫,“导航”表示路由正在发生变化,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程 中:全局的, 单个路由独享的, 或者组件级的,下面来快速来接具体内容吧
    2021-12-12

最新评论