如何使用Axios处理Server-Sent Events (SSE)的响应

Server-Sent Events（简称SSE）是一种基于HTTP的服务器向客户端单向实时推送数据的技术规范，客户端发起请求后，服务端会保持连接打开，持续向客户端发送格式化的事件流数据。很多前端项目习惯用Axios作为网络请求工具，但Axios默认的响应处理机制会将整个响应内容一次性加载完成后才返回，无法直接处理SSE这种分块持续返回的数据流。下面介绍两种使用Axios处理SSE响应的可行方案。

方案一：利用Axios的responseType配置处理流数据

Axios支持设置responseType为stream，此时响应会以流的形式返回，我们可以通过监听流的data事件来逐段处理SSE数据。需要注意的是，这种方式在浏览器环境和Node.js环境下的流处理API略有差异，以下示例以浏览器环境为基础。

实现步骤

• 设置Axios请求的responseType为stream
• 监听响应流的data事件，获取分块返回的原始数据
• 将原始数据转换为字符串，按照SSE的格式规范解析事件内容
• 监听流的end事件处理连接关闭逻辑，监听error事件处理异常

代码示例

import axios from 'axios';

// 存储未处理完的SSE数据片段
let buffer = '';

// 发起SSE请求
axios({
  method: 'get',
  url: 'http://127.0.0.1:3000/sse',
  responseType: 'stream'
}).then(response => {
  const stream = response.data;
  // 监听流数据返回事件
  stream.on('data', chunk => {
    // 将二进制数据转换为字符串
    const chunkStr = chunk.toString();
    buffer += chunkStr;
    // 按照SSE的换行符分割数据
    const lines = buffer.split('n');
    // 最后一行可能是不完整的片段，保留到下次处理
    buffer = lines.pop() || '';
    lines.forEach(line => {
      // SSE事件格式中，以data:开头的行是事件数据
      if (line.startsWith('data:')) {
        const data = line.slice(5).trim();
        console.log('收到SSE数据：', data);
        // 这里可以处理业务数据，比如更新页面状态
      }
    });
  });

  // 监听流结束事件
  stream.on('end', () => {
    console.log('SSE连接已关闭');
  });

  // 监听流错误事件
  stream.on('error', err => {
    console.error('SSE请求出错：', err);
  });
}).catch(err => {
  console.error('发起SSE请求失败：', err);
});

方案二：结合Fetch API封装兼容Axios的调用方式

如果项目对Axios的依赖较强，也可以使用Fetch API处理SSE响应后，封装成和Axios类似的调用形式，兼顾开发习惯和SSE的处理需求。Fetch API原生支持ReadableStream，可以更方便地读取分块响应数据。

实现步骤

• 使用Fetch API发起请求，获取响应的body可读流
• 通过getReader方法获取流的读取器，循环读取分块数据
• 对读取到的数据做和方案一类似的SSE格式解析
• 封装成类似Axios的请求函数，方便项目内统一调用

代码示例

// 封装兼容Axios使用习惯的SSE请求函数
function sseRequest(url, options = {}) {
  return new Promise((resolve, reject) => {
    fetch(url, options)
      .then(response => {
        if (!response.ok) {
          reject(new Error(`请求失败，状态码：${response.status}`));
          return;
        }
        const reader = response.body.getReader();
        const decoder = new TextDecoder();
        let buffer = '';

        // 循环读取流数据
        function readStream() {
          reader.read().then(({ done, value }) => {
            if (done) {
              console.log('SSE连接已关闭');
              return;
            }
            // 解码二进制数据为字符串
            const chunkStr = decoder.decode(value, { stream: true });
            buffer += chunkStr;
            const lines = buffer.split('n');
            buffer = lines.pop() || '';
            lines.forEach(line => {
              if (line.startsWith('data:')) {
                const data = line.slice(5).trim();
                console.log('收到SSE数据：', data);
                // 触发自定义回调，模拟Axios的响应处理
                options.onData && options.onData(data);
              }
            });
            // 继续读取下一段数据
            readStream();
          }).catch(err => {
            console.error('读取SSE流出错：', err);
            reject(err);
          });
        }

        readStream();
        // 将reader暴露出去，方便外部主动关闭连接
        resolve({ reader });
      })
      .catch(err => {
        reject(err);
      });
  });
}

// 调用封装的SSE请求
sseRequest('http://127.0.0.1:3000/sse', {
  onData: data => {
    // 处理接收到的SSE数据
    console.log('业务处理数据：', data);
  }
}).then(({ reader }) => {
  // 可以在需要的时候主动关闭连接
  // reader.cancel();
}).catch(err => {
  console.error('SSE请求异常：', err);
});

两种方案的注意事项

• 方案一在部分浏览器环境下，Axios的stream响应类型可能存在兼容性问题，需要根据项目的目标浏览器做适配测试
• SSE的规范中要求服务端返回的内容类型为text/event-stream，如果服务端返回的类型不符合规范，可能导致解析异常
• 如果SSE连接需要携带自定义请求头或者认证信息，两种方案都支持配置对应的请求参数，和普通的Axios请求配置方式一致
• 长时间保持SSE连接时，需要考虑网络断开重连的逻辑，可以在流的end或者error回调中添加重连机制

AxiosSSEServer_Sent_Events前端请求修改时间：2026-07-02 06:24:33