请教AbortController的底层工作原理及实际行为逻辑

核心设计逻辑 #

• AbortController是DOM标准定义的通用信号触发机制，核心通过signal对象传递中止指令：
  • 实例化AbortController时会生成关联的signal对象，该对象是可监听abort事件的DOM事件目标，自带aborted布尔属性标记状态。
  • 调用controller.abort()时，会同步将signal.aborted设为true，并触发signal上的abort事件。

浏览器端底层处理（以PUT文件上传为例） #

• 当你将signal传入fetch配置后，浏览器网络引擎会持续监听signal的状态：
  • 触发abort()后，浏览器会立即停止向服务器发送剩余的上传数据（如果传输未完成），同时终止本地请求处理流程——包括取消响应等待、释放相关网络资源。
  • 由于HTTP是无状态协议，浏览器无法强制服务器终止已接收请求的处理，但客户端会直接放弃后续交互：不再等待服务器响应，也不会处理任何后续收到的服务器返回内容，这也是你无需后端处理取消逻辑的原因。

跨API适配逻辑 #

AbortController的通用设计使其能被多种Web API适配：

• 除fetch外，ReadableStream、新版XHR等API都内置了对signal的监听逻辑。
• 当signal触发中止事件时，这些API会中断自身异步操作，抛出AbortError异常，便于你在代码中捕获并处理取消场景。

示例代码的具体行为 #

适配取消场景后的完整代码：

const controller = new AbortController();
const signal = controller.signal;

// 5秒后触发请求中止
setTimeout(() => controller.abort(), 5000);

fetch(url, { signal })
  .then(response => response.text())
  .then(text => console.log(text))
  .catch(err => {
    // 捕获中止错误，处理取消后的逻辑
    if (err.name === 'AbortError') {
      console.log('文件上传请求已被中止');
    }
  });

• 若5秒内请求未完成，controller.abort()会触发signal的中止状态，浏览器随即停止上传流程。
• fetch的Promise会直接拒绝并抛出AbortError，进入catch分支执行取消后的处理逻辑。

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