连接复用时为什么 fetch 还是新建 TCP 连接？

FSD-倩云提问于 2026-03-19 22:13:18 阅读 6

优化

我在做性能优化时发现，明明连续发了几个 fetch 请求到同一个域名，但浏览器 DevTools 里显示每个请求都新建了 TCP 连接，不是说 HTTP/1.1 支持 keep-alive、HTTP/2 支持连接复用吗？是不是我哪里写错了？

我试过加 withCredentials 和 mode: ‘cors’，也确认服务端返回了 Connection: keep-alive，但还是没复用。代码大概是这样：

fetch('/api/data1')
  .then(res => res.json())
  .then(() => fetch('/api/data2'))
  .then(res => res.json())
  .then(() => fetch('/api/data3'));

连接复用

我来解答赞 8 收藏

反馈

1 条解答

UX恒菽 Lv1

问题很可能是第一个请求还没完成，第二个请求就发出了，浏览器来不及复用连接。

试试改成串行等待每个请求完成后再发下一个：

await fetch('/api/data1');

await fetch('/api/data2');

await fetch('/api/data3');

或者给 fetch 加上 keepalive: true 强制保持连接：

fetch('/api/data1', { keepalive: true })

  .then(res => res.json())

  .then(() => fetch('/api/data2', { keepalive: true }))

  .then(res => res.json())

  .then(() => fetch('/api/data3', { keepalive: true }));

如果你的请求带自定义头或者用了非简单 Content-Type，浏览器会先发 OPTIONS 预检，这个也不会复用连接，记得检查一下。

2026-03-19 22:15