fetch获取流式数据并逐个打字效果

一、直接上代码

 async sendRequest(messageId, content, questionId, questionType, aiToken, innerIndex) {
      let that = this;
      const response = await fetch(
        `${
          process.env.VUE_APP_WEB_API
        }/urlf_rnd=${new Date().getTime()}&message_id=${messageId}&question_id=${messageId}&question_type=${questionType}&stream=true`,
        {
          method: 'GET',
          cache: 'no-cache',
          headers: {
            'Content-Type': 'text/event-stream',
            aiToken: aiToken,
          },
        }
      ).then(response => {
        //     function read() {
        //   return reader.read().then(({ done, value }) => {
        //     if (done) {
        //       console.log('Stream complete');
        //       return;
        //     }
        //     console.log(value);
        //     return read(); // 继续读取
        //   });
        // }
        // return read();

        const reader = response.body.getReader();
        let buffer = ''; // 用于累积数据块
        let resultWord = ''; //返回的答案
        function read() {
          reader
            .read()
            .then(({ done, value }) => {
              that.loading = false;
              that.scrollFlag = false;
              if (done) {
                // 尝试解析最后一个数据块（如果有的话）
                if (buffer) {
                  try {
                    const lastChunk = buffer.trim().replace(/^data:/, ''); // 移除可能的 'data:' 前缀并去除首尾空白
                    const json = JSON.parse(lastChunk);
                    // 处理最后一个JSON对象
                    console.log(json);
                  } catch (e) {
                    console.error('Error parsing last chunk:', e);
                  }
                }
                console.log('Stream complete');

                that.requestRecomme1(messageId, innerIndex);
                return;
              }
              // 将新读取的数据块添加到缓冲区中
              const chunk = new TextDecoder().decode(value);
              buffer += chunk;
              // 尝试按行分割数据块并处理
              const lines = buffer.split(/\r?\n/);
              let fullLines = lines.slice(0, -1); // 最后一行可能是不完整的，所以保留在缓冲区中
              buffer = lines.slice(-1)[0]; // 更新缓冲区为剩余的不完整行
              console.log(fullLines, 'fullLines');
              fullLines.forEach(line => {
                const jsonString = line.trim().replace(/^data:/, ''); // 移除 'data:' 前缀并去除首尾空白
                try {
                  if (line) {
                    const json = JSON.parse(jsonString);
                    // 处理每个JSON对象
                    console.log(json.data.content, json, 'json');
                    resultWord += json.data.content;
                    that.$set(that.messageList, innerIndex, {
                      type: 'right',
                      session_id: json.data.session_id,
                      message_id: json.data.message_id,
                      reply_id: json.data.reply_id,
                      message: resultWord,
                      source: [],
                      sourceEdit: [],
                      question: [],
                    });
                    that.receiveMsg = that.messageList[innerIndex];
                    that.chcekScroll();
                    that.executeScroll(!that.scrollFlag);
                  }
                } catch (e) {
                  console.error('Error parsing JSON:', e, 'in line:', line);
                }
              });

              // 递归调用 read 方法以继续读取流
              read();
            })
            .catch(error => console.error('Error reading stream:', error));
        }
        read();
      });
    },