概述
日常开发中,接口数据请求失败是很常见的需求,因此我们有时候可能需要对失败的请求进行重试,提高用户体验。
实现
如下案例通过fetch方法做请求,项目中肯定使用axios居多,思路都是一致的
原理
要想实现请求重试,我们需要清楚如下问题:
- R: 什么时候重试?
- A: 请求失败的时候
- R:请求重试次数?
- A:外部传入
- R:如何失败后重新请求?
- A:利用请求promise状态和递归重新请求实现
程序
js
/**
* @Description 发送请求,返回promise
* @param { string } url 请求地址
* @param { number } maxCount 最大重试次数
* @returns { Promise<any> } 返回请求结果的promise
**/
// 定义
function sendRequest(url, maxCount = 3) {
return fetch(url).catch((error) => {
return maxCount <= 0
? Promise.reject(error)
: sendRequest(url, maxCount - 1);
});
}
// 使用
sendRequest("https://api.example.com/data").then((response) => {
console.log("Request succeeded:", response);
});