解決vue中axios設(shè)置超時(shí)(超過(guò)5分鐘)沒(méi)反應(yīng)的問(wèn)題
(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),
這里設(shè)置timeout后可以有效的解決剛才的問(wèn)題!
以上這篇解決vue中axios設(shè)置超時(shí)(超過(guò)5分鐘)沒(méi)反應(yīng)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue列表如何實(shí)現(xiàn)滾動(dòng)到指定位置樣式改變效果
這篇文章主要介紹了Vue列表實(shí)現(xiàn)滾動(dòng)到指定位置樣式改變效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動(dòng)特效代碼
這篇文章主要介紹了vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動(dòng)特效,實(shí)現(xiàn)思路是使用Vue.component定義公共組件,使用window.requestAnimationFrame(首選,次選setTimeout)來(lái)循環(huán)數(shù)字動(dòng)畫,詳細(xì)代碼跟隨小編一起看看吧2022-09-09詳解通過(guò)JSON數(shù)據(jù)使用VUE.JS
本篇文章主要介紹了詳解通過(guò)JSON數(shù)據(jù)使用VUE.JS,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05vue項(xiàng)目打包發(fā)布到Nginx后無(wú)法訪問(wèn)后端接口的解決辦法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包發(fā)布到Nginx后無(wú)法訪問(wèn)后端接口的解決辦法,記錄一下項(xiàng)目需要注意的地方,方便以后快速使用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04