前端 fetchEventSource （sse）

前言：为什么要用这个而不是原生的EventSource ，因为原生的不支持post请求，以及参数携带等

1、安装 npm install @microsoft/fetch-event-source

2、

// sse
import { fetchEventSource } from '@microsoft/fetch-event-source'
import { getUserJWTtoken } from '@/utils/auth'

// 参数处理
const factory = (options) => (
    (options.method = options.method || 'POST'),
    (options.headers = {
        'Content-Type': 'application/json',
        Authorization: getUserJWTtoken(),
        ...options.headers
    }),
    (options.body = options.body || {}),
    options
)
// 参数处理
export default function () {
  return {
    // 开始sse
    start: async (url, options = {}, callback) => {
      try {
        if (!url) {
          console.log('请输入有效url')
          return
        }
        await fetchEventSource(url, {
          ...factory(options),
          openWhenHidden: true,
          onmessage(event) {
            if (event.data === '[DONE]') return
            if (event.data.length !== 0) {
              callback({ status: 'running', message: JSON.parse(event.data) })
            }
          },
          onerror(error) {
            callback({
              status: 'finish',
              message: '服务器出错了， 请稍后重试.....',
              error: true,
            })
            throw error // 必须抛出错误，否则停止不了
          },
          onclose(msg) {
            callback({ status: 'finish', message: '读取结束' })
          },
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 停止sse
    stop: () => {},
  }
}

3、使用

<script setup>
import sseHook from './hook/eventSource.js'
const sse = sseHook()

sse.start('接口路径', options配置, callback回调函数)

</script>