在前文相关章节的描述中，我们了解到客户端调用 SSE 的方式是利用 EventSource。

但该方式存在如下缺点：

1. 只支持 GET 请求；
2. 不能设置自定义请求头；
3. 不能设置请求体，只能通过 Query String 的方式设置到目标 url 上；
4. 连接中断时，无法自定义控制。它会静默一段时间，自动重试。对于生产应用来说，不够友好。而且该方式，会令开发人员感到困惑。

因此，我们可以使用自定义方式来调用 SSE：

1. axios目前并不支持读取 stream；
2. 幸运的是，我们可以使用 fetch；
3. 尽管可以使用 XHR + streaming，但是功能可用性可能比不上 fetch。

1.自定义fetch

使用 fetch 读取 text/event-stream 数据：

fetch(url).then(async res => {
  const reader = res.body.getReader()
  while (true) {
    const result = await reader.read()
    const { value, done } = result
    const utf8Decoder = new TextDecoder('utf-8')
    const data = utf8Decoder.decode(value, { stream: true })
    console.log(data, done)
    if (done) {
      break
    }
  }
})

2.使用fetch-event-source库

@microsoft/fetch-event-source

import { fetchEventSource } from '@microsoft/fetch-event-source'

async function createFetchEventSource (url) {
  await fetchEventSource(url, {
    onmessage (event) {
      console.log(event.data, event)
    }
  })
}