用 js fetch 写一个 stream 请求的代码

// 创建一个 ReadableStream 对象，用于流式请求
function createStream(url) {
  // 创建一个 ReadableStream
  const stream = new ReadableStream({
    start(controller) {
      // 发起 Fetch 请求
      fetch(url)
        .then((response) => {
          const reader = response.body.getReader();
          function push() {
            // 读取数据
            return reader.read().then(({ done, value }) => {
              // 如果读取完成，则关闭流
              if (done) {
                controller.close();
                return;
              }
              // 将数据块传递给流
              controller.enqueue(value);
              // 继续读取下一个数据块
              return push();
            });
          }
          return push();
        })
        .catch((error) => {
          // 发生错误时，中断流并抛出异常
          controller.error(error);
        });
    },
  });
  
  return new Response(stream, { headers: { "Content-Type": "application/octet-stream" } });
}

// 使用流式请求
const streamUrl = "http://example.com/stream"; // 替换为实际的流式请求 URL
fetch(createStream(streamUrl)).then((response) => {
  // 通过 response.body.getReader().read() 逐步获取数据
  const reader = response.body.getReader();
  function process() {
    return reader.read().then(({ done, value }) => {
      // 处理数据，例如将数据分块显示在页面上
      console.log(value);
      if (done) {
        // 数据处理完成
        console.log("Stream processing finished.");
        return;
      }
      // 继续处理下一个数据块
      return process();
    });
  }
  return process();
});