前端逐字输出代码实现

一.fetch与axios的比较

fetch 和 axios 是两种常用的 HTTP 请求工具，在前端开发中经常使用来与后端进行通信。它们有一些重要的区别和各自的优缺点。其中流式处理在我们实现逐字输出中起到了主要作用

fetch

fetch 是现代浏览器内置的 API，用于发起网络请求。它返回的是一个 Promise，更加现代和简洁。

优点：

1. 内置于浏览器：不需要额外的库文件，减少了依赖。

2. 基于 Promise：更简洁和易于链式调用。

3. 流式处理：支持 ReadableStream，方便处理大数据量或流式数据。

4. 灵活性高：可以使用 Request 和 Response 对象进行更多自定义操作。

缺点：

1. 不自动处理 JSON：需要手动调用 response.json() 来处理 JSON 数据。

2. 不支持取消请求：没有内置的取消请求机制（虽然可以使用 AbortController 进行额外处理）。

3. 缺少一些常用功能：如超时设置、全局配置、拦截器等。

二. fetch的使用

使用步骤

1. 发送请求：

   const response = await fetch(url, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify({ question: question })
   });

   • 使用 fetch 发送 POST 请求到指定的 URL，设置请求头 Content-Type 为 application/json，并将 question 作为请求体发送。

2. 检查响应体是否支持流：

   if (!response.body) {
     throw new Error('ReadableStream not yet supported in this browser.');
   }

   • 检查 response.body 是否存在。如果不存在，抛出错误，表明浏览器不支持 ReadableStream。

3. 读取数据流：

   jconst reader = response.body.getReader();
   let decoder = new TextDecoder('utf-8');

   • 获取读取器 response.body.getReader() 用于读取响应的流数据。

   • 创建一个 TextDecoder 实例，用于将二进制数据解码为字符串。

4. 处理数据流：

   while (true) {
     const { done, value } = await reader.read();
     if (done) break; // 如果数据流结束，退出循环
   ​
     const chunkData = decoder.decode(value, { stream: true }).trim();
     this.streams.push(chunkData);
     this.updateMessagesFromStreams();
   }

   • 使用 while (true) 循环持续读取数据流。

   • reader.read()

     返回一个 Promise，解析后得到一个对象

     { done, value }

     ：

     • done：如果为 true，表示数据流已结束，退出循环。

     • value：当前读取的二进制数据块。

   • 使用 decoder.decode 将二进制数据解码为字符串，并存入 streams 数组。

   • 每读取到一个数据块后，调用 updateMessagesFromStreams 方法来更新 messages 数组。

5. 更新 messages 数组：

   updateMessagesFromStreams() {
     const combinedMessage = this.streams.join('');
     this.messages = [{ content: combinedMessage, type: 'bot' }];
   }

   • updateMessagesFromStreams 方法将 streams 数组中的所有字符串连接成一个完整的字符串。

   • 更新 messages 数组，将连接后的字符串作为新的消息内容。

总结

通过使用 fetch 进行流式请求，可以有效地逐块处理数据并实时更新前端显示。与 axios 类似，fetch 的 ReadableStream 使得处理流数据更加简洁和现代化。此方法在数据量较大或需要逐步处理和显示数据的场景下尤为适用。

三. 实际代码实现

async sendToBackend(question) {
  const url = "http://localhost:5000/api/query"; // 确保这是正确的后端URL
  this.streams = [];
  this.sending = true;
​
  try {
    // 发送流式请求
    const response = await axios({
      method: 'post',
      url: url,
      data: { question: question },
      responseType: 'stream'
    });
​
    const reader = response.data.getReader();
    let decoder = new TextDecoder('utf-8');
​
    // 读取数据流
    while (true) {
      const { done, value } = await reader.read();
      if (done) break; // 如果数据流结束，退出循环
​
      // 假设数据是字符串形式的，直接存入 streams 数组
      const chunkData = decoder.decode(value, { stream: true }).trim(); // 假设数据是一个个汉字字符串
      this.streams.push(chunkData);
​
      // 更新 messages 数组（每获取到一个块就更新一次）
      this.updateMessagesFromStreams();
    }
​
    // 标记发送完成
    this.sending = false;
  } catch (error) {
    console.error('Error sending to backend:', error);
    this.sending = false;
  }
},
​
updateMessagesFromStreams() {
  // 将 streams 数组中的所有字符串连接成一个，并存入 messages 数组
  const combinedMessage = this.streams.join('');
  this.messages = [{ content: combinedMessage, type: 'bot' }];
}
​