快捷導(dǎo)航

解決vue中axios設(shè)置超時(shí)(超過(guò)5分鐘)沒(méi)反應(yīng)的問(wèn)題

更新時(shí)間：2020年09月04日 09:41:20 作者：七俠劍客

這篇文章主要介紹了解決vue中axios設(shè)置超時(shí)(超過(guò)5分鐘)沒(méi)反應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

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

直接上代碼：

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

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

在index.js配置超時(shí)時(shí)間后，記得重啟服務(wù)，不然會(huì)沒(méi)反應(yīng)

補(bǔ)充知識(shí)：Vue項(xiàng)目請(qǐng)求時(shí)間過(guò)長(zhǎng)導(dǎo)致斷開(kāi)連接的問(wèn)題

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

問(wèn)題：上傳視頻至阿里云oss，大文件莫名的會(huì)上傳兩次，而且前端每次大約在4.1min的時(shí)候斷開(kāi)連接

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

解決方案：

1.后端框架（laravel）驗(yàn)證：

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

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

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

原先配置文件默認(rèn)超時(shí)時(shí)長(zhǎng)為2min（這里也是猜測(cè)）

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

經(jīng)過(guò)一頓的測(cè)試和研究發(fā)現(xiàn)，