如何实现请求失败后的指数退避重试并监控重试次数？

问题的核心是 retryCount 被定义在全局作用域，导致它在多次调用 payRequest 时被共享了。这种情况下，不同请求之间的重试计数会互相干扰，导致监控系统记录的值不准确。

通用的做法是把 retryCount 封装到函数内部，确保每个请求都有自己独立的计数器。另外，为了避免递归带来的复杂性，可以用循环结合 Promise 实现更清晰的指数退避逻辑。下面是改进后的代码：

function payRequest() {

  let retryCount = 0; // 把计数器放到函数内部

  const maxRetries = 3;



  const attempt = () => {

    return fetch('/api/pay')

      .then(response => {

        if (!response.ok) throw new Error('失败');

        reportRetryCount(retryCount); // 确保只在成功时上报正确的重试次数

        return response.json();

      })

      .catch(err => {

        retryCount++;

        if (retryCount > maxRetries) {

          reportRetryCount(retryCount); // 上报最终失败时的重试次数

          throw err;

        }

        // 指数退避，延迟后重新尝试

        return new Promise(resolve => 

          setTimeout(resolve, Math.pow(2, retryCount) * 1000)

        ).then(attempt);

      });

  };



  return attempt();

}

这里的关键点有三个：第一，把 retryCount 放到函数作用域内，确保每次调用 payRequest 都是一个全新的计数器；第二，在每次成功或最终失败时调用 reportRetryCount，确保上报的是正确的值；第三，使用递归函数 attempt 来实现指数退避，逻辑更清晰。

如果觉得递归不够直观，也可以改成基于循环的实现方式：

async function payRequest() {

  let retryCount = 0;

  const maxRetries = 3;



  while (retryCount <= maxRetries) {

    try {

      const response = await fetch('/api/pay');

      if (!response.ok) throw new Error('失败');

      reportRetryCount(retryCount); // 成功时上报

      return response.json();

    } catch (err) {

      retryCount++;

      if (retryCount > maxRetries) {

        reportRetryCount(retryCount); // 最终失败时上报

        throw err;

      }

      await new Promise(resolve => 

        setTimeout(resolve, Math.pow(2, retryCount) * 1000)

      );

    }

  }

}

这种写法用 async/await 和循环替代了递归，代码逻辑更直观，尤其适合不喜欢递归的开发者。

总结一下，核心问题是 retryCount 的作用域不对，导致多个请求共享了同一个计数器。解决方法就是把计数器封装到函数内部，同时确保每次成功或失败时正确上报重试次数。这两种实现方式都可以解决问题，选你觉得更顺手的就行。

这个问题的核心在于 retryCount 被定义成了全局变量，导致多个请求之间共享了同一个计数器。JS里面这种问题很常见，尤其是在异步操作中，变量作用域一不小心就会踩坑。

解决办法是把 retryCount 的状态封装到函数内部，每次调用 payRequest 时都重新初始化计数器，确保每个请求的重试次数是独立的。可以用一个闭包来实现：

function createPayRequest() {

  let retryCount = 0; // 每次调用 createPayRequest 都会创建独立的 retryCount

  return function payRequest() {

    return fetch('/api/pay')

      .then(response => {

        if (!response.ok) throw new Error('失败');

        reportRetryCount(retryCount); // 记录正确的重试次数

        return response.json();

      })

      .catch(err => {

        retryCount++;

        if (retryCount > 3) throw err;

        return new Promise(resolve => 

          setTimeout(resolve, Math.pow(2, retryCount) * 1000)

        ).then(payRequest);

      });

  };

}



// 使用时先创建一个独立的请求函数

const payRequest = createPayRequest();



// 然后正常调用

payRequest().then(data => console.log(data)).catch(err => console.error(err));

这样每次调用 createPayRequest 都会生成一个新的 payRequest 函数，它的 retryCount 是独立的，不会被其他请求干扰。

至于监控重试次数，reportRetryCount 应该在请求成功或者最终失败时调用，而不是在每次重试时都调用，否则会导致数据不准确。你可以稍微调整一下逻辑：

function createPayRequest() {

  let retryCount = 0;

  return function payRequest() {

    return fetch('/api/pay')

      .then(response => {

        if (!response.ok) throw new Error('失败');

        reportRetryCount(retryCount); // 请求成功时记录

        return response.json();

      })

      .catch(err => {

        retryCount++;

        if (retryCount > 3) {

          reportRetryCount(retryCount); // 最终失败时记录

          throw err;

        }

        return new Promise(resolve => 

          setTimeout(resolve, Math.pow(2, retryCount) * 1000)

        ).then(payRequest);

      });

  };

}

总结一下：把 retryCount 封装到闭包里，确保每个请求独立计数；在合适的地方调用 reportRetryCount，避免重复上报。这样就能正确统计重试次数了。