解決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è)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 解決Android studio xml界面無(wú)法預(yù)覽問(wèn)題2. 基于android studio的layout的xml文件的創(chuàng)建方式3. 詳解Android studio 動(dòng)態(tài)fragment的用法4. Android如何加載Base64編碼格式圖片5. 圖文詳解vue中proto文件的函數(shù)調(diào)用6. Spring Boot和Thymeleaf整合結(jié)合JPA實(shí)現(xiàn)分頁(yè)效果(實(shí)例代碼)7. 什么是python的自省8. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟9. Vuex localStorage的具體使用10. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)

網(wǎng)公網(wǎng)安備