fetch获取text/event-stream数据并处理

小金子.

已于 2024-04-10 01:59:33 修改

阅读量4.7k

点赞数 5

文章标签：前端 javascript 开发语言

于 2024-04-10 01:29:58 首次发布

本文链接：https://blog.youkuaiyun.com/m0_74114605/article/details/137574407

版权

文章描述了如何使用JavaScript的fetchAPI封装一个异步函数，处理从服务器接收的流式数据，包括消息参数的发送、流数据的解析和回调函数的调用，适用于实时聊天应用中的AI消息处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//封装整个请求
    //content：要发送的问题参数
    //onMessageReceived：流式数据获取成功后的回调函数
    //end：流式数据获取结束后的回调函数
const chatAi = async (content, onMessageReceived, end) => {
  try {
    // 发起fetch请求
    const response = await fetch('url', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(content)
    });

    const reader = response.body.getReader();
    let decoder = new TextDecoder();

    let buffer = '';

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        //全部获取流式数据结束后的操作
        end()
        break;
      }

      // 将读取到的数据添加到缓冲区（可能是因为客户端处理数据的速度比服务器发送数据的速度快，
     //导致一次性接收到多条数据。这时候就要用buffer缓冲区来处理一下）
    //后端给我的数据格式：{"chunk_message": "我是数据"}
      buffer += decoder.decode(value, { stream: true });

      // 尝试解析每条消息
      let startIndex = buffer.indexOf('{');
      let endIndex = buffer.indexOf('}', startIndex);

      while (startIndex !== -1 && endIndex !== -1) {
        const resultData = buffer.substring(startIndex, endIndex + 1);
        buffer = buffer.substring(endIndex + 1); // 移除已处理的数据

        // 寻找下一条消息的起始位置
        startIndex = buffer.indexOf('{');
        endIndex = buffer.indexOf('}', startIndex);

        // 定义正则表达式来匹配 chunk_message 的值，我们只要chunk_message对应的值
       //因为json数据和text/event-stream数据不同，json数据可以通过.访问chunk_message 的值，
       //但是text/event-stream数据是个纯文本，不能通过.访问chunk_message，我们用正则表达式来获取需要的数据
        let pattern = /"chunk_message"\s*:\s*"([^"]*)"/;

        // 使用正则表达式进行匹配
        let match = resultData.match(pattern);

        if (match) {
          // 提取匹配到的值
          let chunkMsg = match[1];
          // 将消息传递给回调函数处理
          onMessageReceived(chunkMsg);
        } else {
          // console.log("No chunk_message found");
        }
      }
    }
  } catch (error) {
    console.error(error);
  }
};

//使用
chatAi("你是谁",(res)=>{
    //处理数据
},()=>{ 
   //数据获取结束后的操作
}
)