chatGpt fetch stream解析

橙樱

已于 2024-06-14 14:29:00 修改

阅读量74

点赞数 1

文章标签： javascript

于 2024-06-12 15:34:20 首次发布

本文链接：https://blog.csdn.net/qq_38902432/article/details/139628335

版权

async function fetchStream() {
  const response = await fetch('https://example.com/large-file'); // 替换为实际 URL

  if (!response.ok) {
    throw new Error('Network response was not ok');
  }

  const reader = response.body.getReader();
  const decoder = new TextDecoder("utf-8");
  let result = '';
  let done = false;

  while (!done) {
    const { value, done: doneReading } = await reader.read();
    done = doneReading;
    result += decoder.decode(value, { stream: true });
    // 处理数据块，例如打印到控制台
    console.log(result);
  }

  console.log('Fetch completed.');
}

fetchStream().catch(err => console.error('Fetch failed: ', err));

/*
注意事项：
response.body.getReader() 获取流式数据的读取器。
TextDecoder 用于将二进制数据解码为文本。
reader.read() 返回一个包含数据块的对象和读取状态的 Promise。
done 表示读取是否完成。
逐步处理数据
在实际应用中，你可能希望逐步处理数据块，而不是将它们全部累积到一个结果中。这里你可以在每次读取时处理数据块。
*/

注意事项：

response.body.getReader() 获取流式数据的读取器。
TextDecoder 用于将二进制数据解码为文本。
reader.read() 返回一个包含数据块的对象和读取状态的 Promise。
done 表示读取是否完成。

逐步处理数据

在实际应用中，你可能希望逐步处理数据块，而不是将它们全部累积到一个结果中。这里你可以在每次读取时处理数据块。

async function fetchStream() {
  const response = await fetch('https://example.com/large-file'); // 替换为实际 URL

  if (!response.ok) {
    throw new Error('Network response was not ok');
  }

  const reader = response.body.getReader();
  const decoder = new TextDecoder("utf-8");

  let done = false;

  while (!done) {
    const { value, done: doneReading } = await reader.read();
    done = doneReading;
    
    // 将解码后的值传递给处理函数
    const chunk = decoder.decode(value, { stream: true });
    processChunk(chunk);
  }

  console.log('Fetch completed.');
}

function processChunk(chunk) {
  // 处理每个数据块的逻辑，例如解析JSON，或者锦荟展示
  console.log('Received chunk:', chunk);
}

fetchStream().catch(err => console.error('Fetch failed: ', err));

参考文档：

ReadableStream
从 Fetch 到 Streams —— 以流的角度处理网络请求