需求情況比較簡單： 需要在前端實現一個重試的功能，如果一個請求訪問出錯（不管是後端服務出錯還是網絡出錯，亦或者是請求的結果不符合預期）均可進行自動重試
直接上代碼，代碼直接複製到xx.html文件即可運行
<!DOCTYPE html>
<html>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//最大重試次數
const MAX_RETRY = 3
//請求超時時間
const REQUEST_TIMEOUT = 15 * 1000
// 重試間隔500ms
const RETRY_INTERVAL = 500
function sleep(ms){
return new Promise((resolve)=>setTimeout(resolve,ms));
}
async function request(url,method,params,retry = MAX_RETRY,hookResult = null){
let res
let requireRetry
try {
//構造請求的參數
let config = {
url: url,
method: method,
timeout: REQUEST_TIMEOUT
}
if(Object.is(method,'get')){
config['params'] = params
}else if (Object.is(method,"post")){
config['data'] = params
}
res = await axios.request(config)
//發生服務器錯誤，重試
if (res && res.status > 500){
console.log('返回的狀態碼:', res.status)
requiretRetry = true
}
//使用調用者邏輯判斷，如果未達到期許，重試
if (hookResult && !hookResult(res)){
console.log('hookResult函數返回爲false，需要重試')
requiretRetry = true
}
}catch(err){
console.log(err)
// 發生網絡錯誤，重試
requireRetry = true
}
if (requireRetry && retry > 0){
// 500ms之後重試
await sleep(RETRY_INTERVAL)
console.log('重試', retry)
res = await request(url, method, params, --retry, hookResult)
}
return res
}
//use example
async function test()
{
let res =await request("https://www.baidu.com/s","get",{"wd":"hello"})
console.log("result is : " , res)
}
</script>
<body >
<button type="button" onclick="test()">Click Me!</button>
</body>
</html>