JavaScript 中怎么用 AbortSignal 实现 fetch 超时中断-js教程-PHP中文网

javascript 中用 abortsignal 实现 fetch 超时中断，核心是创建 abortcontroller 实例并传入 signal，配合 settimeout 在超时后调用 abort()；fetch 接收 signal 后会在中止时抛出 aborterror，需手动 cleartimeout 防内存泄漏，并注意浏览器兼容性及服务端未终止问题。

javascript 中怎么用 abortsignal 实现 fetch 超时中断

JavaScript 中用 AbortSignal 实现 fetch 超时中断，核心是借助 AbortController 创建可取消的信号，并在指定时间后调用 abort() 方法。只要把它的 signal 传给 fetch 的 options，请求就会在超时触发时自动中止。

创建 AbortController 并传入 signal

这是最基础的一步：实例化 AbortController，然后把它的 signal 属性作为 fetch 的配置项传入。

AbortController 提供 abort() 方法和一个只读的 signal 对象
fetch 支持接收 { signal } 配置，一旦 signal 被中止，正在进行的请求会立即 reject（抛出 AbortError）

用 setTimeout 触发超时 abort

手动设置一个定时器，在超时时间到达时调用 controller.abort() 即可中断请求。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

注意：setTimeout 不会自动清除，建议在请求完成或失败后手动 clearTimeout 避免内存泄漏（尤其在封装成函数时）
示例：10 秒超时

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 10000);

fetch('/api/data', { signal: controller.signal })
  .then(response => response.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求已超时');
    } else {
      console.error('其他错误:', err);
    }
  })
  .finally(() => clearTimeout(timeoutId));

封装成可复用的超时 fetch 函数

把逻辑抽出来，能更安全、更方便地复用：

返回 Promise，内部自动处理超时与清理
支持传入自定义 timeout 毫秒数，默认 5000ms
捕获 AbortError 并统一转为带提示的 reject，便于上层区分超时和其他错误

function timeoutFetch(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout);

  return fetch(url, {
    ...options,
    signal: controller.signal
  }).finally(() => clearTimeout(id));
}

// 使用
timeoutFetch('/api/user', { method: 'POST' }, 8000)
  .then(res => res.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      throw new Error('网络请求超时，请稍后重试');
    }
    throw err;
  });