JS请求重试机制全面解析

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JS请求重试实现方法详解》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

前端请求需要重试机制，因为网络环境复杂多变，用户可能遭遇信号不稳定或服务器短暂故障，重试能提升请求成功率和应用健壮性；1. 实现重试常用策略包括：固定延迟、线性延迟、指数退避、随机抖动和熔断器模式；2. 需注意的陷阱包括：确保API幂等性避免重复提交、设置最大重试次数防止资源耗尽、合理处理非瞬时错误如4xx状态码、关注用户体验并提供加载反馈、做好错误分类与日志记录以便调试，从而安全有效地提升系统可靠性。

在JavaScript中实现请求重试，核心思路无非是当你发起的网络请求遇到问题（比如网络抖动、服务器暂时性过载）时，不是直接失败，而是稍等片刻，再尝试一次，甚至多次。这就像我们打电话，第一次没接通，过会儿再拨一次一样，目的就是提高请求的成功率和应用的健壮性。

当我们在前端处理网络请求时，总会遇到各种不确定性。比如用户在地铁里，信号时好时坏；或者后端服务正在进行短暂的维护，响应偶尔超时。直接报错当然可以，但如果能“聪明”一点，在背后默默地多试几次，很多时候用户根本感知不到这些瞬时的问题，体验自然就好很多。

解决方案

实现请求重试，通常我们会结合 Promise、async/await，并引入一些延迟机制。一个比较健壮的重试函数会考虑到最大重试次数、每次重试的间隔时间，甚至采用指数退避（Exponential Backoff）策略来避免对服务器造成更大的压力。

这里提供一个基于 fetch API 的重试实现示例，它包含了指数退避和随机抖动（Jitter）来优化重试策略：

/**
 * 带有重试机制的 fetch 请求函数
 * @param {string} url 请求地址
 * @param {RequestInit} options fetch 配置项
 * @param {object} retryOptions 重试配置
 * @param {number} retryOptions.maxRetries 最大重试次数，默认为3
 * @param {number} retryOptions.initialDelay 初始延迟时间（毫秒），默认为1000ms
 * @param {number} retryOptions.maxDelay 最大延迟时间（毫秒），默认为30000ms
 * @param {function} retryOptions.shouldRetry 一个函数，判断是否需要重试，默认为对所有非2xx响应和网络错误重试
 * @returns {Promise} fetch 响应
 */
async function fetchWithRetry(url, options = {}, retryOptions = {}) {
    const {
        maxRetries = 3,
        initialDelay = 1000, // 1秒
        maxDelay = 30000, // 30秒
        shouldRetry = (error, response) => {
            // 默认：网络错误或服务器5xx错误时重试
            if (error) return true; // 捕获到错误（例如网络断开）
            if (response && response.status >= 500 && response.status < 600) return true; // 服务器错误
            return false;
        }
    } = retryOptions;

    let retries = 0;
    let delay = initialDelay;

    while (retries <= maxRetries) {
        try {
            const response = await fetch(url, options);

            // 如果响应状态码是成功（2xx），直接返回
            if (response.ok) {
                return response;
            }

            // 如果不成功，但根据 shouldRetry 判断不需要重试，则直接抛出错误
            if (!shouldRetry(null, response)) {
                console.warn(`请求 ${url} 收到状态码 ${response.status}，不再重试。`);
                throw new Error(`HTTP Error: ${response.status}`);
            }

            // 否则，需要重试
            console.warn(`请求 ${url} 失败，状态码 ${response.status}。正在进行第 ${retries + 1} 次重试...`);

        } catch (error) {
            // 捕获到网络错误或其他异常
            if (!shouldRetry(error, null)) {
                console.error(`请求 ${url} 遇到不可重试的错误:`, error);
                throw error;
            }
            console.error(`请求 ${url} 遇到错误:`, error.message, `正在进行第 ${retries + 1} 次重试...`);
        }

        retries++;

        if (retries <= maxRetries) {
            // 计算指数退避延迟，并加入随机抖动
            // 延迟 = min(maxDelay, initialDelay * 2^retries + 随机抖动)
            const exponentialDelay = Math.min(maxDelay, initialDelay * Math.pow(2, retries - 1));
            const jitter = Math.random() * (exponentialDelay / 2); // 0到指数延迟一半的随机数
            delay = Math.floor(exponentialDelay + jitter);

            console.log(`等待 ${delay}ms 后重试...`);
            await new Promise(resolve => setTimeout(resolve, delay));
        }
    }

    // 达到最大重试次数后仍未成功，抛出最终错误
    throw new Error(`请求 ${url} 在 ${maxRetries} 次重试后仍未成功。`);
}

// 示例用法：
// fetchWithRetry('/api/data', { method: 'GET' }, { maxRetries: 5, initialDelay: 500 })
//     .then(response => response.json())
//     .then(data => console.log('数据获取成功:', data))
//     .catch(error => console.error('数据获取失败:', error));

// 模拟一个会失败几次的请求
// let attempt = 0;
// async function mockApiCall() {
//     attempt++;
//     console.log(`模拟API调用，第 ${attempt} 次`);
//     if (attempt < 3) { // 前两次失败
//         throw new Error('模拟网络错误');
//     }
//     return { ok: true, json: () => Promise.resolve({ message: '成功了!' }) };
// }

// fetchWithRetry(
//     'mock-url', // 实际项目中替换为真实URL
//     {},
//     {
//         maxRetries: 5,
//         initialDelay: 500,
//         shouldRetry: (error, response) => {
//             // 针对mockApiCall的特殊处理，所有错误都重试
//             return true;
//         }
//     }
// )
// .then(response => response.json())
// .then(data => console.log('最终成功:', data))
// .catch(error => console.error('最终失败:', error));

为什么前端请求需要重试机制？

我们构建的Web应用，多数时候都运行在网络环境复杂多变的环境中，尤其是移动设备。你想想看，用户可能在电梯里，信号断断续续；或者在咖啡馆，Wi-Fi时好时坏。这些瞬时性的网络抖动，往往会导致请求失败。如果没有重试机制，一次临时的网络波动就可能让用户看到一个恼人的错误提示，或者导致某个功能无法使用，这无疑会大大降低用户体验。

此外，后端服务也并非永远百分百稳定。短暂的服务重启、负载均衡器的瞬时故障、数据库连接池的抖动，都可能导致少数请求在特定时间点失败。前端的重试机制就像给应用加了一层“弹性”，它能消化掉这些短暂的、可恢复的错误，让我们的应用在面对不完美的世界时，显得更加健壮和可靠。当然，这也能在一定程度上减少用户对客服的抱怨，甚至提升一些关键业务流程的转化率。

实现请求重试有哪些常见的策略或模式？

实现请求重试，并非简单地“失败了就再来一次”那么粗暴。为了效率和对后端服务的友好，我们通常会采用一些更精细的策略：

1. 固定延迟（Fixed Delay）： 每次重试都等待相同的时间。这种最简单，但如果服务器持续过载，固定延迟可能会导致重试请求像潮水一样涌向服务器，反而加剧问题。想象一下，一堆客户端都在同一时间点重试，这可不是什么好事。

2. 线性延迟（Linear Delay）： 每次重试的延迟时间线性增加，比如第一次等1秒，第二次等2秒，第三次等3秒。比固定延迟稍微好点，但同样可能造成请求堆积。

3. 指数退避（Exponential Backoff）： 这是最常用也最推荐的策略。每次重试的延迟时间呈指数级增长，例如：delay = initialDelay * 2^n (n为重试次数)。这样可以确保随着重试次数的增加，重试间隔越来越长，给服务器足够的恢复时间，也避免了短时间内大量重试请求的冲击。

4. 随机抖动（Jitter）： 在指数退避的基础上，加入一个随机值。比如，延迟时间不是精确的 2^n，而是在 2^n 的基础上加上或减去一个随机数。这样做的好处是，即使多个客户端在同一时间遇到问题，它们的重试时间也会被随机打散，避免了所谓的“惊群效应”（Thundering Herd Problem），即大量请求同时涌向服务器。

5. 熔断器模式（Circuit Breaker Pattern）： 这其实是比单纯重试更高级的概念，但与重试紧密相关。当某个服务持续失败达到一定阈值时，熔断器会“打开”，阻止所有新的请求直接发送给这个服务，而是立即失败或转向备用方案。在一段时间后，熔断器会进入“半开”状态，允许少量请求通过以测试服务是否恢复。如果恢复了就“关闭”，否则继续“打开”。这能有效防止对一个已经故障的服务进行无休止的重试，保护客户端和服务端资源。虽然在前端实现完整的熔断器比较复杂，但其思想可以用于更智能地决定是否应该继续重试。

请求重试的实现中需要注意哪些潜在问题或陷阱？

重试机制虽好，但如果使用不当，也可能引入新的问题，甚至让情况变得更糟。

首先，幂等性（Idempotency） 是一个大坑。如果你的API操作不是幂等的，也就是重复执行同一个请求会产生不同的结果（比如，一个“创建订单”的POST请求，如果重试了两次，可能会创建两个订单），那么盲目重试就会带来数据不一致的灾难。对于非幂等操作，除非你非常确定第一次请求没有成功（比如，根本没有到达服务器），否则应该非常谨慎地使用重试，或者干脆不重试。而像GET请求（获取数据）通常是幂等的，重试就安全得多。

其次，无限重试或过度重试 可能导致资源耗尽。你必须设定一个合理的最大重试次数。否则，一个持续失败的请求可能会在浏览器中无限期地运行，消耗用户的CPU和网络带宽，最终可能导致页面卡死。同时，过于频繁的重试，即使有指数退避，也可能对后端服务造成不必要的压力，甚至触发服务端的限流或IP封禁。

再者，用户体验。虽然重试是为了提升用户体验，但如果重试时间过长，用户可能会感到应用卡顿。对于一些对实时性要求高的操作，长时间的重试等待是不可接受的。因此，在等待重试时，提供清晰的加载状态或进度反馈非常重要，让用户知道应用正在努力，而不是无响应。对于长时间无法成功的请求，及时告知用户并提供手动重试或取消的选项，比默默地无限重试要好得多。

还有一点，错误分类。不是所有的错误都值得重试。例如，HTTP 4xx 系列的错误（如400 Bad Request, 401 Unauthorized, 404 Not Found）通常表示客户端请求本身有问题，或者资源不存在。这些错误是永久性的，重试也无济于事，只会浪费资源。我们应该只对那些瞬时性、可恢复的错误（如网络中断、超时、HTTP 5xx 服务器错误）进行重试。shouldRetry 函数的判断逻辑在这里就显得尤为关键。

最后，调试复杂性。引入重试机制后，当请求最终失败时，排查问题可能会变得稍微复杂。因为你需要知道是第几次重试失败了，以及每次重试的具体错误是什么。良好的日志记录和错误追踪机制在这里会非常有帮助。

今天关于《JS请求重试机制全面解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！