可重试接口请求

概述

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

实现

如下案例通过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);
});
相关推荐
百万蹄蹄向前冲2 小时前
秋天的第一口代码,Trae SOLO开发体验
前端·程序员·trae
努力奋斗12 小时前
VUE-第二季-02
前端·javascript·vue.js
路由侠内网穿透2 小时前
本地部署 SQLite 数据库管理工具 SQLite Browser ( Web ) 并实现外部访问
运维·服务器·开发语言·前端·数据库·sqlite
一只韩非子2 小时前
程序员太难了!Claude 用不了?两招解决!
前端·claude·cursor
JefferyXZF3 小时前
Next.js项目结构解析:理解 App Router 架构(二)
前端·全栈·next.js
Sane3 小时前
react函数组件怎么模拟类组件生命周期?一个 useEffect 搞定
前端·javascript·react.js
若梦plus3 小时前
模块化与package.json
前端
烛阴3 小时前
Aspect Ratio -- 宽高比
前端·webgl
若梦plus3 小时前
Node.js中util.promisify原理分析
前端·node.js