封裝 axios 實現自動重試

2021-10-07 01:43:10 字數 1105 閱讀 1066

為什麼寫這個題目呢?

因為之前寫的乙個 node 程式有點小問題,使用的 axios 通過**請求資料,**伺服器(阿布雲)時不時抽風(407、413、503)。

因為第一次寫的時候當做乙個 demo 去實現的,寫的挺簡陋,只能說大體功能對,但是沒有容錯機制

這裡我們先算一筆帳啊,一次請求等於 1+100 次,因為我內部還會請求好多資料。

如果只是第一次失敗了,那麼無關緊要,大不了重發一次。

但是如果是後面 100 次中有極個別暴雷了,那麼就會導致整個101次請求全部作廢。(因為返回的資料是錯誤的,使用者會觸發第二次請求。不止加重了伺服器的壓力,還增加了使用者檢查的壓力

好了,為什麼實現這個功能說了,那麼我們要開始實現了。

axios 發請求還是很簡單的,那麼我們可以直接仿照他來實現一下封裝。

axios()

.then(console.log)

.catch(console.log)

我直接在 data 上增加乙個 __try_count 用於設定重試次數。

因為 axios 是支援 promise,所以我們的方法也支援。

axios 如果成功了我們也 resolve。

axios 如果失敗了我們先判斷次數,然後根據具體的錯誤,進行重試。

function axiosautotry(data))

.catch(error=>else if(error.code == 'econnreset')else, 500 + math.random() * 500)

}else if(error.response && error.response.status == 503), 1000 + math.random() * 500)

}else if(error.response && error.response.status == 429), 1000 + math.random() * 1000)

}// console.error('異常錯誤', error)}}

reject(error)

})})

}

vue封裝axios自動帶上token

在我們使用vue開發的時候,請求後台我們通常使用axios這些第三方庫來實現,但是我們在使用的時候,遇到乙個問題,我們每乙個請求都需要帶上token,這樣就增加了我們的重複工作量。所以,我們可以對axios做乙個封裝,讓我們使用它的時候,自動帶入token和url的字首 url的字首生產環境和開發環...

axios基礎封裝

script新建axios資料夾,新建index.js fetch.js fetch.js如下 index.js如下 引入fetch.js檔案 import from fetch 定義獲取資料的函式getdata 其中url,type,data對應fetch config 中的config expo...

axios封裝使用

記錄專案中使用過的axios封裝,以便下次使用。import axios from axios 引用axios import from util util 引用剛才我們建立的util.js檔案,並使用getcookie方法 import qs from qs 很重要!過濾json格式化 axios ...