1. 程式人生 > 程式設計 >解決vue中axios設定超時(超過5分鐘)沒反應的問題

解決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: ' 介面代理地址',//設定超時
      changeOrigin: true
     }
     
  },

在index.js配置超時時間後,記得重啟服務,不然會沒反應

補充知識:Vue專案請求時間過長導致斷開連線的問題

對於laravel,已經無力吐槽,不能支援多執行緒是個永遠的痛,如果這個問題在java中,直接另闢一個執行緒就可以搞定,分分鐘就可以返回資料!

問題:上傳視訊至阿里雲oss,大檔案莫名的會上傳兩次,而且前端每次大約在4.1min的時候斷開連線

思路:因為在阿里雲的控制檯可以看到同一個視訊被上傳了兩次,猜測是前端框架或者後端框架做了一次連結retry

解決方案:

1.後端框架(laravel)驗證:

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

解決vue中axios設定超時(超過5分鐘)沒反應的問題

可以看出後臺在400s之後可以返回資料,基本可以排除是後臺laravel框架的問題

2.前端框架(Vue)驗證

解決vue中axios設定超時(超過5分鐘)沒反應的問題

原先配置檔案預設超時時長為2min(這裡也是猜測)

然後開始上傳視訊,控制檯傳送upload請求,重新整理阿里雲控制檯會看到檔案正在上傳,奇妙的事情發生了控制報錯net err_empty_response,然後在重新整理阿里雲控制檯會發現剛才上傳的視訊已經完成,但是還有同樣的一個視訊正在上傳,所以猜測在前端沒有得到response後,又嘗試了請求了一次,導致視訊會被上傳兩次!所以可以斷定問題出在前端框架上。

經過一頓的測試和研究發現,

解決vue中axios設定超時(超過5分鐘)沒反應的問題

這裡設定timeout後可以有效的解決剛才的問題!

以上這篇解決vue中axios設定超時(超過5分鐘)沒反應的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。