当前位置:首页 > JavaScript

js retry 实现

2026-01-31 18:35:44JavaScript

实现 JavaScript 重试机制的方法

方法一:基于 Promise 和递归的简单重试

function retry(fn, maxRetries, delay) {
  return new Promise((resolve, reject) => {
    const attempt = (retryCount) => {
      fn()
        .then(resolve)
        .catch((error) => {
          if (retryCount >= maxRetries) {
            reject(error);
            return;
          }
          setTimeout(() => attempt(retryCount + 1), delay);
        });
    };
    attempt(0);
  });
}

方法二:支持指数退避的重试策略

function retryWithBackoff(fn, maxRetries, initialDelay) {
  return new Promise((resolve, reject) => {
    const attempt = (retryCount) => {
      fn()
        .then(resolve)
        .catch((error) => {
          if (retryCount >= maxRetries) {
            reject(error);
            return;
          }
          const delay = initialDelay * Math.pow(2, retryCount);
          setTimeout(() => attempt(retryCount + 1), delay);
        });
    };
    attempt(0);
  });
}

方法三:支持自定义条件判断的重试

function retryWithCondition(fn, maxRetries, shouldRetry) {
  return new Promise((resolve, reject) => {
    const attempt = (retryCount) => {
      fn()
        .then(resolve)
        .catch((error) => {
          if (retryCount >= maxRetries || !shouldRetry(error)) {
            reject(error);
            return;
          }
          setTimeout(() => attempt(retryCount + 1), 0);
        });
    };
    attempt(0);
  });
}

方法四:使用 async/await 语法实现

async function asyncRetry(fn, maxRetries, delay) {
  let lastError;
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await fn();
    } catch (error) {
      lastError = error;
      if (delay > 0) {
        await new Promise((r) => setTimeout(r, delay));
      }
    }
  }
  throw lastError;
}

方法五:封装为可配置的重试工具函数

js retry 实现

function createRetry(options = {}) {
  const {
    maxRetries = 3,
    delay = 1000,
    backoffFactor = 1,
    shouldRetry = () => true
  } = options;

  return async function retry(fn) {
    let lastError;
    for (let i = 0; i < maxRetries; i++) {
      try {
        return await fn();
      } catch (error) {
        lastError = error;
        if (i === maxRetries - 1 || !shouldRetry(error)) {
          throw lastError;
        }
        const currentDelay = delay * Math.pow(backoffFactor, i);
        await new Promise((r) => setTimeout(r, currentDelay));
      }
    }
  };
}

使用示例

// 示例1: 基本使用
retry(() => fetch('https://api.example.com/data'), 3, 1000)
  .then(console.log)
  .catch(console.error);

// 示例2: 使用指数退避
retryWithBackoff(() => someAsyncOperation(), 5, 1000)
  .then(console.log)
  .catch(console.error);

// 示例3: 使用条件判断
retryWithCondition(
  () => axios.get('/api'),
  3,
  (error) => error.response?.status === 429
);

// 示例4: 使用配置化的重试函数
const customRetry = createRetry({
  maxRetries: 5,
  delay: 500,
  backoffFactor: 2,
  shouldRetry: (error) => error.code !== 'PERMANENT_ERROR'
});

customRetry(() => callExternalService())
  .then(console.log)
  .catch(console.error);

注意事项

  • 重试机制适用于暂时性错误(如网络波动),不适用于永久性错误
  • 对于幂等操作可以安全重试,非幂等操作需谨慎
  • 考虑设置合理的重试次数和延迟时间,避免无限重试
  • 在浏览器环境中使用时,注意用户可能离开页面导致重试中断

标签: jsretry
分享给朋友:

相关文章

js实现轮播图

js实现轮播图

基础轮播图实现 使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。 <div class="slider"> <div…

js实现tab选项卡切换

js实现tab选项卡切换

实现Tab选项卡切换的JavaScript方法 使用纯JavaScript实现Tab切换功能,可以通过监听点击事件动态切换内容显示状态。以下是两种常见实现方式: 基础DOM操作实现 // 获取所有…

jquery js

jquery js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够更高…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js计算器的实现

js计算器的实现

实现基础结构 HTML部分需要创建计算器的基本框架,包含显示区域和按钮。使用<div>容器包裹整个计算器,内部设置一个显示屏和多个按钮。 <div class="calculato…

jquery和js

jquery和js

jQuery与JavaScript的区别 jQuery是一个基于JavaScript的库,封装了许多常用的功能,简化了DOM操作、事件处理、动画效果等。JavaScript是原生语言,功能更全面但代码…