【JS】获取接口返回 EventStream 结构的数据（即接收读取 stream 流）

在JavaScript中，EventStream是一种抽象的数据结构，通常用于表示一系列的事件。如果你需要从某个接口获取EventStream数据，并且该接口返回的是一个stream流，你可以使用fetch API结合ReadableStream接口来实现。

以下是一个示例代码，展示了如何获取接口返回的EventStream数据：

// 假设接口URL是 'https://example.com/events'
const url = 'https://example.com/events';
 
// 使用fetch API获取响应
fetch(url)
  .then(response => {
    // 确保服务器响应的类型是 'text/event-stream'
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    if (response.headers.get('Content-Type') !== 'text/event-stream') {
      throw new Error('Received content is not text/event-stream');
    }
    
    // 返回的响应体是一个ReadableStream
    return response.body;
  })
  .then(stream => {
    // 转换ReadableStream为TextStream
    const reader = stream.getReader();
 
    // 处理流中的数据
    const p = reader.read().then(function processStream({ value, done }) {
      if (done) {
        // 流结束
        return;
      }
 
      // 处理接收到的事件数据
      const eventData = new TextDecoder('utf-8').decode(value);
      console.log(eventData);
 
      // 递归读取下一个事件
      return processStream();
    });
 
    // 你可以在此取消流的读取或处理错误
    return p;
  })
  .catch(e => console.error(e));

在这个示例中，我们使用fetch获取了一个URL的响应。然后，我们检查了响应的状态和内容类型，并确保内容是'text/event-stream'类型。接下来，我们从响应体中获取了ReadableStream，并使用TextDecoder来解码接收到的数据。这样，我们就可以从EventStream中逐步读取和处理数据了。