前端使用@microsoft/fetch-event-source 接收流式数据

1、安装依赖

 npm install @microsoft/fetch-event-source --save 

2、使用fetchEventSource

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

export function aiQuestion({question, callbackFn, signal}) {
  fetchEventSource(
    url地址，
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(你的json数据),
      signal, // 用作信号中断请求的，AbortController实例
      openWhenHidden: true, // 默认浏览器当前标签不处于活动状态的时候取消当前请求，切回的时候再重新请求。
      responseType: EventStreamContentType, // 有些后端实现sse的时候重写了fetch，所以需要加这个参数才行
      onmessage: callbackFn.onmessage,
      onerror: callbackFn.onerror,
      onclose: callbackFn.onclose
    }
  )
}

3、点击按钮的时候，发起接口调用

function handleClickBtn() {
  const onmessage = (event) => {
    try {
      const receiveData = JSON.parse(event.data);
      // 这里写你的逻辑
    }catcj(e) {
    
    }
  }
  const onerror = (event) => {
   // 你的逻辑
   throw new Error('失败了') // 这里需要做一个抛出异常处理，才不会自动一直发起重试
  }
  const onclose = () => { // 你的逻辑}
  if (this.ctrl) { // 由于abort函数只能调用一次，第二次就不管用了， aborted属性由false变成true之后，不会再次被改变了，所以下面只能重新赋值null后，再次重新实例化一个新的。
　  this.ctrl = null;
  }
  this.ctrl = new AbortController();

  aiQuestion({'测试'，{onmessage, onerror, onclose}, this.ctrl.signal})

}

4、如果有取消按钮，或者关闭弹框的时候要中断请求

function cancel() {
  if (this.ctrl) {
    this.ctrl.abort();
  }
}