前端Vue使用@microsoft/fetch-event-source插件发送SSE请求实现类似ChatGPT的流式回答

为什么要用这个插件而不用原生的EventSource Api呢？

首先是因为EventSource只能进行 GET 请求，无法使用POST或者其他请求方式；

其次无法传递自定义请求头和请求体；

再者就是中断后无法控制重试。

为了解决以上问题，这里就推荐使用@microsoft/fetch-event-source这个插件，接下来我来说一下怎么在Vue中使用这个插件。

安装

npm install @microsoft/fetch-event-source

使用 

<script>
import { fetchEventSource } from '@microsoft/fetch-event-source';
methods:{
    sendRequest(){
        const controller = new AbortController(); //用于中断请求
        fetchEventSource('/api/你的请求地址', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ a: '1' })
            openWhenHidden: true, //页面退至后台是否保持连接
            signal: controller.signal,
            onmessage(msg) {
                console.log(msg);
            },
            onerror(err) {
                console.log(err);
                if(如果需要关闭){
                    controller.abort(); //中断请求
                }
            }
        }
    }
}
</script>

到此就能够实现类似ChatGPT的流式返回啦！！