Vue3中fetchEventSource的AbortController陷阱：为什么你的SSE连接关不掉？

最新推荐文章于 2026-02-27 12:57:58 发布

原创

最新推荐文章于 2026-02-27 12:57:58 发布 · 511 阅读

Vue3中fetchEventSource的AbortController陷阱：为什么你的SSE连接关不掉？

在Vue3项目中使用Server-Sent Events（SSE）技术时，许多开发者都会选择@microsoft/fetch-event-source这个库来处理长连接。它结合了fetch API的灵活性和EventSource的简洁性，但在实际使用中，一个常见却容易被忽视的问题就是AbortController的"一次性"特性——你的SSE连接可能在第一次关闭后，后续就无法正常终止了。

1. 问题现象：为什么第二次abort()失效了？

让我们先看一个典型的错误实现：

const controller = new AbortController();

const fetchData = async () => {
  // 尝试中止之前的请求
  controller.abort();
  
  // 发起新的SSE请求
  await fetchEventSource('/api/sse', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({query: '最新消息'}),
    signal: controller.signal,
    onmessage(ev) {
      console.log('收到消息:', ev.data);
    }
  });
}

这段代码在第一次点击时能正常关闭连接，但第二次点击时就会出现以下情况：

控制台没有报错，但连接实际上没有被终止
旧的SSE连接仍在后台持续接收消息
新的连接又建立了，导致消息重复接收
内存泄漏风险增加，因为旧的连接没有被正确清理

2. 原理剖析：AbortController的工作机制

要理解这个问题，我们需要深入AbortController的设计原理：

AbortController的核心特性：

每个AbortController实例只能触发一次abort操作
调用abort()后，关联的signal会被永久标记为"aborted"
任何后续使用该signal的请求都会立即被拒绝

const controller = new AbortController();
console.log(controller.signal.aborted); // false

controller.abort();
console.log(controller.signal.aborted); // true

// 再次使用同一个signal
fetchEventSource('/api/sse', {
  signal: controller.signal // 这里会立即失败
});

Vue3响应式系统的特殊考量：