Fetch Streaming 上传：ReadableStream 请求体与背压治理

---

title: Fetch Streaming 上传：ReadableStream 请求体与背压治理

keywords:

• fetch streaming
• ReadableStream
• 背压
• duplex 'half'
• 上传管线

description: 使用 ReadableStream 作为 fetch 请求体进行流式上传，并通过背压与分片治理保证稳定与低占用，含 duplex: 'half' 参数说明。

categories:

• 文章资讯
• 技术教程

---

概述

现代浏览器支持以 ReadableStream 作为 fetch 请求体进行流式上传。需在初始化中声明 duplex: 'half' 以允许上行流式传输，并在管线中处理背压与错误。

用法/示例

const encoder = new TextEncoder()
let i = 0, done = false
const stream = new ReadableStream({
  pull(controller) {
    if (done) { controller.close(); return }
    controller.enqueue(encoder.encode(JSON.stringify({ n: i++ })))
    if (i > 1000) done = true
  }
})

await fetch('/upload', {
  method: 'POST',
  body: stream,
  headers: { 'Content-Type': 'application/json' },
  duplex: 'half'
})

工程建议

• 在 pull 中根据下游背压节奏进行分片；对大对象进行序列化与压缩。
• 与服务端协商分块与重试策略，保证幂等与故障恢复。
• 在不支持环境回退到传统上传或分片断点续传方案。

参考与验证

• MDN：Streams — https://developer.mozilla.org/docs/Web/API/Streams_API
• web.dev：Streaming requests — https://web.dev/articles/fetch-upload-streaming