JavaScript中类箭头函数方法能否在axios异常回调中调用自身重连

核心结论 #

完全可以在catch异常回调中调用自身的connect方法实现资源重连，但必须规避无限制递归带来的问题。

语法层面的可行性 #

你当前代码中的connect是通过箭头函数定义的类实例属性，this的绑定在类实例初始化时就固定指向当前实例对象，不会出现普通类方法在异步回调场景下的this指向漂移问题，因此在catch回调中直接调用this.connect()可以正常触发方法执行，不存在语法层面的调用障碍。

直接调用无限制重试的风险 #

如果直接像注释里写的那样不做任何判断就递归调用，会触发两个严重问题：

• 无边界递归会不断叠加调用栈，最终触发栈溢出报错
• 当接口持续不可用时，会无限向目标地址发起请求，既可能触发浏览器的请求限流策略，也会对目标服务造成不必要的压力

可落地的优化参考 #

实现重试逻辑时必须加上明确的重试次数限制，参考改进代码：

class ConnectUser {
  // 记录当前已重试次数
  retryCount = 0
  // 设定最大允许重试次数
  maxRetryTimes = 3

  connect = () => {
    axios.get('URL').catch(err => {
      // 仅在未超出最大重试额度时触发重连
      if (this.retryCount < this.maxRetryTimes) {
        this.retryCount++
        this.connect()
        return
      }
      // 超出重试额度后执行兜底逻辑
      console.error('连接失败，已达最大重试次数', err)
    });
  }
}

额外优化方向 #

• 重试逻辑不要同步直接触发，可增加数百毫秒的延迟间隔，避免短时间高频请求
• 对错误类型做区分：网络波动、服务端5xx类错误可触发重试，4xx类客户端权限不足、资源不存在类错误直接走兜底，无重试价值
• 每次发起新的正式连接时，记得将retryCount重置为0，避免跨连接的重试计数残留

内容的提问来源于stack exchange，提问作者user9645391