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

概述

现代浏览器支持以 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