欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vue中axios設(shè)置超時(超過5分鐘)沒反應(yīng)的問題

 更新時間:2020年09月04日 09:41:20   作者:七俠劍客  
這篇文章主要介紹了解決vue中axios設(shè)置超時(超過5分鐘)沒反應(yīng)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

(chrome環(huán)境)在做項(xiàng)目的時候,由于做大數(shù)據(jù)可視化界面,后臺接口查詢數(shù)據(jù)往往會比較久(上百萬的數(shù)據(jù)量),導(dǎo)致vue項(xiàng)目axios請求超時timeout設(shè)置就比較大。開始設(shè)置超時未3分鐘時沒有問題(這里我設(shè)置超時彈窗了),可設(shè)置超時未6分鐘時,卻在五分鐘左右彈出請求超時,但明明設(shè)置tiemout=6x60x1000。

于是通過資料查詢,了解到Chrome瀏覽器,默認(rèn)請求超時為五分鐘,所以導(dǎo)致上訴現(xiàn)象產(chǎn)生,可如何在vue中修改瀏覽器超時?

直接上代碼:

我們可以在config文件中index.js,配置timeout即可,這里是vue2環(huán)境(vu3相同)

proxyTable: {
    '/searchPerson': {
      target: '接口代理地址',
      timeout: 6*60*1000, //設(shè)置超時
      changeOrigin: true
     },
     '/taskResult': {
      target: ' 接口代理地址',
      timeout: 6*60*1000,  //設(shè)置超時
      changeOrigin: true
     }
     
  },

在index.js配置超時時間后,記得重啟服務(wù),不然會沒反應(yīng)

補(bǔ)充知識:Vue項(xiàng)目請求時間過長導(dǎo)致斷開連接的問題

對于laravel,已經(jīng)無力吐槽,不能支持多線程是個永遠(yuǎn)的痛,如果這個問題在java中,直接另辟一個線程就可以搞定,分分鐘就可以返回?cái)?shù)據(jù)!

問題:上傳視頻至阿里云oss,大文件莫名的會上傳兩次,而且前端每次大約在4.1min的時候斷開連接

思路:因?yàn)樵诎⒗镌频目刂婆_可以看到同一個視頻被上傳了兩次,猜測是前端框架或者后端框架做了一次鏈接retry

解決方案:

1.后端框架(laravel)驗(yàn)證:

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

可以看出后臺在400s之后可以返回?cái)?shù)據(jù),基本可以排除是后臺laravel框架的問題

2.前端框架(Vue)驗(yàn)證

原先配置文件默認(rèn)超時時長為2min(這里也是猜測)

然后開始上傳視頻,控制臺發(fā)送upload請求,刷新阿里云控制臺會看到文件正在上傳,奇妙的事情發(fā)生了控制報(bào)錯net err_empty_response,然后在刷新阿里云控制臺會發(fā)現(xiàn)剛才上傳的視頻已經(jīng)完成,但是還有同樣的一個視頻正在上傳,所以猜測在前端沒有得到response后,又嘗試了請求了一次,導(dǎo)致視頻會被上傳兩次!所以可以斷定問題出在前端框架上。

經(jīng)過一頓的測試和研究發(fā)現(xiàn),

這里設(shè)置timeout后可以有效的解決剛才的問題!

以上這篇解決vue中axios設(shè)置超時(超過5分鐘)沒反應(yīng)的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 第一個Vue插件從封裝到發(fā)布

    第一個Vue插件從封裝到發(fā)布

    這篇文章主要為大家詳細(xì)介紹了第一個Vue插件從封裝到發(fā)布的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • Vue列表如何實(shí)現(xiàn)滾動到指定位置樣式改變效果

    Vue列表如何實(shí)現(xiàn)滾動到指定位置樣式改變效果

    這篇文章主要介紹了Vue列表實(shí)現(xiàn)滾動到指定位置樣式改變效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-05-05
  • JavaScript之Vue.js【入門基礎(chǔ)】

    JavaScript之Vue.js【入門基礎(chǔ)】

    本文主要介紹一下Vue.js并附上在Node.js環(huán)境下搭建一個簡單的Demo實(shí)例代碼。條理清晰,有助于閱讀和理解。有需要的朋友可以看下
    2016-12-12
  • vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動特效代碼

    vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動特效代碼

    這篇文章主要介紹了vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動特效,實(shí)現(xiàn)思路是使用Vue.component定義公共組件,使用window.requestAnimationFrame(首選,次選setTimeout)來循環(huán)數(shù)字動畫,詳細(xì)代碼跟隨小編一起看看吧
    2022-09-09
  • 使用vue實(shí)現(xiàn)玉兔迎春圖高亮示例詳解

    使用vue實(shí)現(xiàn)玉兔迎春圖高亮示例詳解

    這篇文章主要為大家介紹了使用vue實(shí)現(xiàn)玉兔迎春圖高亮示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • vue前后端端口不一致的問題解決

    vue前后端端口不一致的問題解決

    本文主要介紹了vue前后端端口不一致的問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-10-10
  • vue中axios的二次封裝實(shí)例講解

    vue中axios的二次封裝實(shí)例講解

    在本篇文章里小編給大家整理了關(guān)于vue中axios的二次封裝實(shí)例以及相關(guān)知識點(diǎn)總結(jié),需要的朋友們可以學(xué)習(xí)下。
    2019-10-10
  • 詳解通過JSON數(shù)據(jù)使用VUE.JS

    詳解通過JSON數(shù)據(jù)使用VUE.JS

    本篇文章主要介紹了詳解通過JSON數(shù)據(jù)使用VUE.JS,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • vue項(xiàng)目打包發(fā)布到Nginx后無法訪問后端接口的解決辦法

    vue項(xiàng)目打包發(fā)布到Nginx后無法訪問后端接口的解決辦法

    這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包發(fā)布到Nginx后無法訪問后端接口的解決辦法,記錄一下項(xiàng)目需要注意的地方,方便以后快速使用,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-04-04
  • 快速理解Vue路由導(dǎo)航守衛(wèi)

    快速理解Vue路由導(dǎo)航守衛(wèi)

    這篇文章主要介紹了快速理解Vue路由導(dǎo)航守衛(wèi),“導(dǎo)航”表示路由正在發(fā)生變化,vue-router?提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機(jī)會植入路由導(dǎo)航過程?中:全局的,?單個路由獨(dú)享的,?或者組件級的,下面來快速來接具體內(nèi)容吧
    2021-12-12

最新評論