如何实现API请求5秒超时判定并输出日志及提示的功能

核心实现依赖ES6的Promise.race语法，通过多Promise竞赛实现超时控制

实现逻辑 #

• 封装一个超时专用Promise，5秒后主动抛出超时错误
• 用Promise.race()同时运行API请求Promise和超时Promise，优先返回先执行完成的结果
• 用try/catch捕获异常，在超时错误分支中完成控制台日志打印、通知发送的需求

基础版代码实现（无请求中断） #

// 超时工具函数，参数为等待毫秒数
function timeout(ms) {
  return new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error('API_REQUEST_TIMEOUT'))
    }, ms)
  })
}

// 带超时控制的请求方法
async function fetchWithTimeout() {
  try {
    // 两个Promise竞赛，5秒超时
    const result = await Promise.race([
      API.methodForAPI(),
      timeout(5000)
    ])
    // 原有的正常请求后续逻辑
    if(result) {
      // 你的正常业务处理代码
    }
  } catch (err) {
    // 匹配超时错误
    if(err.message === 'API_REQUEST_TIMEOUT') {
      // 控制台打印超时日志
      console.error('API请求超时，最大等待时间5秒', err)
      // 发送通知逻辑，可替换为站内信、通知中心推送、弹窗等
      alert('请求超时，请稍后重试')
      return
    }
    // 其他非超时请求错误的处理逻辑
    console.error('API请求异常', err)
  }
}

优化版代码实现（带请求中断） #

如果你的API方法支持接收AbortSignal中断信号，建议超时触发时同时中断未完成的API请求，避免无用的资源占用：

// 带中断能力的超时工具函数
function timeoutWithAbort(ms, controller) {
  return new Promise((_, reject) => {
    setTimeout(() => {
      controller.abort() // 主动中断原API请求
      reject(new Error('API_REQUEST_TIMEOUT'))
    }, ms)
  })
}

async function fetchWithTimeout() {
  const controller = new AbortController()
  const signal = controller.signal
  try {
    const result = await Promise.race([
      // 假设API方法支持传入signal参数接收中断信号
      API.methodForAPI({ signal }),
      timeoutWithAbort(5000, controller)
    ])
    if(result) {
      // 正常业务处理代码
    }
  } catch (err) {
    if(err.message === 'API_REQUEST_TIMEOUT' || err.name === 'AbortError') {
      console.error('API请求超时，已主动中断未完成请求', err)
      alert('请求超时，请稍后重试')
      return
    }
    console.error('API请求异常', err)
  }
}

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