如何在浏览器中用Axios以POST请求获取SSE流式响应

先纠正两处拼写错误 #

• 你的curl示例里"steam": true应为"stream": true
• Axios配置里responseType: 'steam'应为responseType: 'stream'

Axios处理流式响应的正确代码 #

浏览器端Axios指定responseType: 'stream'后，返回的response.data是ReadableStream，需要用浏览器原生Stream API读取并解析SSE格式数据，完整示例如下：

async function callStreamingAPI(data) {
  try {
    const response = await axios({
      method: 'post',
      url: '/my-service/chat',
      data: data,
      headers: {
        'SESSION_ID': 'Header-Value',
        'Content-Type': 'application/json',
        'Accept': 'text/event-stream',
        // 禁止缓存流式响应，确保实时性
        'Cache-Control': 'no-cache'
      },
      responseType: 'stream'
    });

    const reader = response.data.getReader();
    const decoder = new TextDecoder('utf-8');
    let leftover = '';

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

      // 把二进制流转成字符串
      const chunk = decoder.decode(value, { stream: true });
      leftover += chunk;

      // 按SSE消息分隔符拆分（标准SSE以\n\n分隔每条消息）
      const messages = leftover.split('\n\n');
      // 最后一段可能不完整，留到下一次处理
      leftover = messages.pop() || '';

      // 解析每条有效消息
      for (const msg of messages) {
        if (!msg.trim()) continue;
        // 提取SSE消息里的data内容
        const dataMatch = msg.match(/^data: (.*)$/m);
        if (dataMatch) {
          const content = dataMatch[1];
          // 这里替换成你需要的处理逻辑，比如追加到页面
          console.log('流式内容:', content);
          // document.getElementById('result').textContent += content;
        }
      }
    }

    // 处理最后剩余的不完整数据
    if (leftover.trim()) {
      const dataMatch = leftover.match(/^data: (.*)$/m);
      if (dataMatch) {
        console.log('最后一段内容:', dataMatch[1]);
      }
    }

  } catch (error) {
    console.error('请求失败:', error);
  }
}

关键说明 #

• TextDecoder：负责将二进制流（Uint8Array）转换为UTF-8字符串，{ stream: true }参数保证流式解码的完整性。
• SSE格式解析：标准SSE消息以data: 开头、\n\n作为消息边界，需拆分后提取有效文本内容。
• 缓存控制：添加Cache-Control: no-cache避免浏览器缓存响应，确保实时获取流式数据。

内容的提问来源于stack exchange，提问作者zy_sun