前端請求超時截斷axios?timeout設(shè)置未生效情況解決記錄
更新時間：2024年07月05日 09:38:13 作者：bulucc
在項目中遇到了后臺接口返回數(shù)據(jù)慢的時候往往需要設(shè)置請求失效時間,在項目中遇到設(shè)置timeout失效問題由此記錄下來,這篇文章主要給大家介紹了前端請求超時截斷axios?timeout設(shè)置未生效情況解決的相關(guān)資料,需要的朋友可以參考下
問題描述
前端請求超時截斷，axios timeout設(shè)置未生效情況記錄
timeout設(shè)置方式：
表現(xiàn)（前端超過5min報錯500，直接訪問接口超過5min能夠正常響應(yīng)）：
問題原因
上面的配置設(shè)置時間為1000min，明顯配置沒有生效
解決方式
1、修改axios的默認配置，這里修改為10min
axios.defaults.timeout = 10 * 60 * 1000;
const res: any = await axios.post(smarturl, req_body, {
headers: {'Content-Type': 'application/json'},
});2、重寫axios方法，這里修改為10min
const HTTP_AXIOS = axios.create();
HTTP_AXIOS ({
method: 'post',
url: smarturl,
data: req_body,
timeout: 10 * 60 * 1000,
}).then(reqres => {
if (reqres) {
//請求成功后返回的參數(shù)
console.log('res', reqres);
}
}).catch(error => {
if (error.config.timeout == 3000) {
message.error('請求超時，請檢查網(wǎng)絡(luò)')
} else {
console.log('timeout-error', error)
}
})生效效果：
默認配置不再是5min，超過5min請求未被截斷
總結(jié)
到此這篇關(guān)于前端請求超時截斷axios timeout設(shè)置未生效情況解決的文章就介紹到這了,更多相關(guān)axios timeout設(shè)置未生效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了VUE JS 使用組件實現(xiàn)雙向綁定，詳細的介紹了vue的雙向數(shù)據(jù)綁定原理以及核心代碼模塊，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
這篇文章主要為大家詳細介紹了vue彈窗組件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了vue語法之render函數(shù)和jsx的基本使用,在Vue中是支持jsx的,凡是我們是比較少在Vue中使用jsx的,jsx在react中使用的更加廣泛,因此在這里我簡單介紹一下jsx的基本使用，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)省市區(qū)的級聯(lián)選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
最全vue的vue-amap使用高德地圖插件畫多邊形范圍的示例代碼
這篇文章主要介紹了最全vue的vue-amap使用高德地圖插件畫多邊形范圍,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要介紹了Vue axios 跨域請求無法帶上cookie的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue項目中“regenerator-runtime/runtime“缺失報錯問題終極解決指南
這篇文章主要介紹了Vue項目中“regenerator-runtime/runtime“缺失報錯問題終極解決指南的相關(guān)資料,包括安裝正確的依賴包、在入口文件中引入以及重啟開發(fā)服務(wù)器,需要的朋友可以參考下2026-02-02
Vue 實現(xiàn)復(fù)制功能,不需要任何結(jié)構(gòu)內(nèi)容直接復(fù)制方式
今天小編就為大家分享一篇Vue 實現(xiàn)復(fù)制功能,不需要任何結(jié)構(gòu)內(nèi)容直接復(fù)制方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue2中路由參數(shù)($route.params和$route.query)的使用方法詳解
這篇文章主要為大家詳細介紹了Vue2中路由參數(shù)($route.params和$route.query)的使用方法,包括動態(tài)路徑參數(shù)和URL查詢參數(shù)的獲取,并提供了多種寫法示例,希望對大家有所幫助2026-05-05
vue相關(guān)配置文件詳解及多環(huán)境配置詳細步驟
這篇文章主要介紹了vue相關(guān)配置文件詳解及多環(huán)境配置的教程，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05