Created
April 17, 2021 14:49
-
-
Save semlinker/979ebc659abacea7aa6c0c44af070afe to your computer and use it in GitHub Desktop.
Axios 请求重试示例
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="zh-cn"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Axios 请求重试示例(适配器)</title> | |
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> | |
</head> | |
<body> | |
<h3>Axios 请求重试示例(适配器)</h3> | |
<button onclick="requestWithoutRetry()">请求失败不重试</button> | |
<button onclick="requestWithRetry()">请求失败重试</button> | |
<script> | |
function retryAdapterEnhancer(adapter, options) { | |
const { times = 0, delay = 300 } = options; | |
return async (config) => { | |
const { retryTimes = times, retryDelay = delay } = config; | |
let __retryCount = 0; | |
const request = async () => { | |
try { | |
return await adapter(config); | |
} catch (err) { | |
if (!retryTimes || __retryCount >= retryTimes) { | |
return Promise.reject(err); | |
} | |
__retryCount++; | |
// 延时处理 | |
const delay = new Promise((resolve) => { | |
setTimeout(() => { | |
resolve(); | |
}, retryDelay); | |
}); | |
// 重新发起请求 | |
return delay.then(() => { | |
return request(); | |
}); | |
} | |
}; | |
return request(); | |
}; | |
} | |
const http = axios.create({ | |
baseURL: "http://localhost:3000/", | |
adapter: retryAdapterEnhancer(axios.defaults.adapter, { | |
retryDelay: 1000, | |
}), | |
}); | |
function requestWithoutRetry() { | |
http.get("/users"); | |
} | |
function requestWithRetry() { | |
http.get("/users", { retryTimes: 2 }); | |
} | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="zh-cn"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Axios 请求重试示例(拦截器)</title> | |
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> | |
</head> | |
<body> | |
<h3>Axios 请求重试示例(拦截器)</h3> | |
<button onclick="requestWithoutRetry()">请求失败不重试</button> | |
<button onclick="requestWithRetry()">请求失败重试</button> | |
<script> | |
axios.interceptors.response.use(null, (err) => { | |
let config = err.config; | |
if (!config || !config.retryTimes) return Promise.reject(err); | |
const { __retryCount = 0, retryDelay = 300, retryTimes } = config; | |
// 在请求对象上设置重试次数 | |
config.__retryCount = __retryCount; | |
// 判断是否超过了重试次数 | |
if (__retryCount >= retryTimes) { | |
return Promise.reject(err); | |
} | |
// 增加重试次数 | |
config.__retryCount++; | |
// 延时处理 | |
const delay = new Promise((resolve) => { | |
setTimeout(() => { | |
resolve(); | |
}, retryDelay); | |
}); | |
// 重新发起请求 | |
return delay.then(function () { | |
return axios(config); | |
}); | |
}); | |
function requestWithoutRetry() { | |
axios.get("http://localhost:3000/users"); | |
} | |
function requestWithRetry() { | |
axios.get("http://localhost:3000/users", { retryTimes: 1 }); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment