XMLHttpRequest 终止请求原理

XMLHttpRequest.abort() 方法用于终止正在进行的 HTTP 请求，其底层原理涉及浏览器引擎的多层协作。以下是详细技术解析：

---

核心原理

1. 中断网络层连接

   • 浏览器内核的网络模块收到终止指令后：
     • 若请求仍在 TCP 握手阶段：立即关闭套接字（socket）
     • 若已建立连接：发送 TCP RST 包（Reset）强制断开连接
     • 若使用 HTTP/2/3：触发 QUIC_RESET_STREAM 或 RST_STREAM 帧

2. 清理请求资源

   // 内部伪代码实现
   void XMLHttpRequest::abort() {
     if (m_request) {
       m_request->cancel();   // 通知网络栈终止
       m_request = nullptr;   // 释放请求对象
     }
     m_responseArrayBuffer = null; // 清空接收缓冲区
     transitionState(UNSENT);      // 状态回退
   }

3. 状态机重置

   • 将 XHR 状态强制回退到 UNSENT (0)
   • 清空已接收的响应头和响应体数据

---

事件触发流程

---

关键特性

1. 同步/异步差异

   • 异步请求：立即终止，通过事件回调通知
   • 同步请求：阻塞的 send() 方法会抛出 InvalidStateError 异常

2. 数据完整性保护

   xhr.onprogress = (e) => {
     if (e.lengthComputable) {
       console.log(`已接收: ${e.loaded}/${e.total} bytes`)
     }
   }
   xhr.abort() // 立即停止接收数据，已加载部分被丢弃

3. 内存管理

   • 终止后响应占用的内存会被标记为可回收
   • 底层 ArrayBuffer 引用被清除，避免内存泄漏

---

与 Fetch API AbortController 的区别

特性	XMLHttpRequest.abort()	Fetch + AbortController
中断粒度	整个 XHR 对象	单个 fetch 请求
错误类型	触发 onerror	抛出 AbortError 异常
并发控制	需手动管理实例	共享 AbortSignal 可批量终止
内存释放	需置 null 解除引用	Controller 断开即释放

---

实际应用场景

// 请求超时自动终止
const xhr = new XMLHttpRequest()
const timeoutId = setTimeout(() => {
  xhr.abort()
  console.log('Request timed out')
}, 5000)

xhr.open('GET', 'https://api.example.com/data')
xhr.onload = () => {
  clearTimeout(timeoutId)
  // 处理数据
}
xhr.send()

---

浏览器底层协作

1. 渲染进程：执行 JavaScript 调用 abort()
2. 网络服务 (Chrome)：network_service.mojom 接口处理终止指令
3. 套接字管理器：标记 socket 为 aborted 状态
4. 磁盘缓存：中断可能存在的缓存写入操作
5. 垃圾回收：V8 引擎在下个 GC 周期回收相关对象

⚠️ 注意：部分浏览器（如 Firefox）在扩展程序中调用 abort() 可能需要额外权限才能操作网络层。