如何用setTimeout或Promise实现API调用超时取消？

你需要给API、数据库查询这类异步操作设置10秒超时，无响应时取消调用，下面针对不同场景给出具体实现：

一、支持取消信号的异步操作（如fetch、Firebase部分方法） #

这类操作可以通过AbortController真正取消请求，避免无效资源占用，结合setTimeout实现超时逻辑：

// 创建控制器用于发送取消信号
const controller = new AbortController();
const signal = controller.signal;

// 10秒后触发取消
const timeoutTimer = setTimeout(() => {
  controller.abort();
  console.log("请求超时，已取消");
}, 10000);

try {
  // 将信号传入支持取消的异步方法
  const response = await fetch("你的API地址", { signal });
  // 请求成功后清除超时定时器
  clearTimeout(timeoutTimer);
  const data = await response.json();
  console.log("请求完成:", data);
} catch (err) {
  if (err.name === "AbortError") {
    console.error("请求因超时被取消");
  } else {
    console.error("请求失败:", err);
  }
}

二、通用异步函数（无直接取消机制，如部分数据库查询） #

如果异步操作本身不支持取消，可以用Promise.race让操作和超时Promise竞争，达到超时终止等待的效果：

// 封装超时Promise
function createTimeoutPromise(delay) {
  return new Promise((_, reject) => {
    setTimeout(() => reject(new Error("操作超时")), delay);
  });
}

// 示例：你的异步操作函数
async function getDBData() {
  // 模拟数据库查询逻辑
  return new Promise(resolve => {
    setTimeout(() => resolve("数据库返回内容"), 12000); // 模拟超时场景
  });
}

try {
  // 让异步操作和超时Promise竞争
  const result = await Promise.race([getDBData(), createTimeoutPromise(10000)]);
  console.log("操作成功:", result);
} catch (err) {
  if (err.message === "操作超时") {
    console.error("操作超时，停止等待");
  } else {
    console.error("操作出错:", err);
  }
}

注意事项 #

• 用AbortController的方案能真正终止请求，适合fetch这类支持信号的API；
• Promise.race方案只是终止等待，异步操作本身可能还在后台执行，需根据业务场景评估是否适用。

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