数据的流式读取

AI对话时文字是一个一个的向外蹦的，这是为了用户更好的体验，避免长时间的等待，现在让我们来实现一次数据的流式读取吧。

效果预览：

前言：

本文以fetch请求为列，实现流式读取的重点在于读取方式的变化，我们要先理解时间是消耗在哪一步上的，才能去做优化。

第一步是去发起请求：fetch('')这一步返回的是服务器的一个请求状态，比如是否跨域，是否500等等，这一步响应很快所以问题不在此。

第二步是等待服务端响应的最终数据：res.json(); 这一步是最耗时的，它会一直等到服务器的最终返回，因此对于某些大数据或是类似AI这般需要时间思考一个字一个字返回的数据，使用流式读取或更好，让用户拥有更好的交互体验效果。

流式读取：

流式读取主要在于第二步需要使用 "response.body.getReader()"

// 传统请求
 const init = async () => {
  const response = await fetch('http://localhost:3000/stream-poem');
  const res = await response.json();
  console.log(res, '响应');
}

// 流式读取
const fetchStreamWithReader = async () => {
  const response = await fetch('http://localhost:3000/stream-poem');
  if (!response.body) return;

  const reader = response.body.getReader(); // 获取读取器
  const decoder = new TextDecoder(); // 文本解码器

  while (1) {
    const { done, value } = await reader.read(); // 获取最新数据

    // 数据读取完成，退出循环
    if (done) {
      break;
    }

    // 解析当前文本
    const currentTxt = decoder.decode(value, { stream: true });
    text.value += currentTxt; // 更新文本数据，依次追加
  }
}