可重试接口请求

概述

日常开发中,接口数据请求失败是很常见的需求,因此我们有时候可能需要对失败的请求进行重试,提高用户体验。

实现

如下案例通过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);
});
相关推荐
克喵的水银蛇几秒前
Flutter 自定义 Widget 实战:封装通用按钮 + 下拉刷新列表
前端·javascript·flutter
Li_na_na011 分钟前
React+dhtmlx实现甘特图
前端·react.js·甘特图
艾体宝IT1 分钟前
艾体宝干货 | Redis Java 开发系列#2 数据结构
javascript
用户2965412759171 分钟前
JSAPIThree 加载 Cesium 数据学习笔记:使用 Cesium 地形和影像服务
前端
csdn小瓯4 分钟前
一个现代化的博客应用【react+ts】
前端·react.js·前端框架
一颗不甘坠落的流星6 分钟前
【@ebay/nice-modal-react】管理React弹窗(Modal)状态
前端·javascript·react.js
黛色正浓7 分钟前
【React】极客园案例实践-Layout模块
前端·react.js·前端框架
辛-夷9 分钟前
vue高频面试题
前端·vue.js
IT小哥哥呀11 分钟前
《纯前端实现 Excel 导入导出:基于 SheetJS 的完整实战》
前端·excel
郑州光合科技余经理14 分钟前
技术架构:跑腿配送系统海外版源码全解析
java·开发语言·前端·数据库·架构·uni-app·php