如何在Firefox浏览器中发起流式POST请求？

Firefox已支持通过fetch API发送流式POST请求，实现逻辑和Chrome类似，核心是利用ReadableStream作为请求体，按需分批发送数据。

关键实现细节 #

• Firefox无需额外配置duplex: 'half'参数（部分新版本也已支持该参数，添加不会报错），直接将ReadableStream传入fetch的body即可
• 通过ReadableStream的控制器controller，可以异步分批推送数据，配合延时、异步任务等控制发送速度
• 需确保使用较新版本的Firefox（Firefox 103及以上），以获得完整的流式请求支持

适配Firefox的示例代码 #

function wait(milliseconds) {
  return new Promise(resolve => setTimeout(resolve, milliseconds));
}

// 创建可读流，分批生成数据
const stream = new ReadableStream({
  async start(controller) {
    await wait(1000);
    controller.enqueue('This ');
    await wait(1000);
    controller.enqueue('is ');
    await wait(1000);
    controller.enqueue('a ');
    await wait(1000);
    controller.enqueue('slow ');
    await wait(1000);
    controller.enqueue('request.');
    controller.close(); // 结束流
  },
}).pipeThrough(new TextEncoderStream()); // 转换为UTF-8编码的字节流

// 发送流式POST请求
fetch('/', {
  method: 'POST',
  headers: {'Content-Type': 'text/plain'},
  body: stream
});

注意事项 #

• 后端服务需要支持接收流式请求体，否则可能无法正确处理分批发送的数据
• 如果需要更复杂的流处理，可以结合TransformStream对数据进行中间转换

内容的提问来源于stack exchange，提问作者Надим Закиров