vue使用fetchEventSource实现chatgpt打字机效果

需求:后端接口使用sse长连接，前端调用并在页面赋值，从而实现打字机效果。

因为后端要求POST请求，原生fetch只支持GET请求，遂作罢。

安装fetchEventSource

npm install fetchEventSource复制

页面中使用

import { fetchEventSource } from "@microsoft/fetch-event-source";
 
         await fetchEventSource("/yourapi", {
                method: "POST",
                headers: {
                    "Content-Type": "text/event-stream",
                },
                openWhenHidden: true,
                body: JSON.stringify({
                // 后端要的数据
                    prompt: data, 
                    history: [],
                    max_token: 2048,
                    temperature: 0,
                    top_p: 0.9,
                }),
 
                async onmessage(msg) {
                    const { data } = msg;
                    if (data && JSON.parse(data)) {
                        const result = JSON.parse(data);
                        _this.content = result.response;  // 返回的数据赋值到页面
                        const content = document.getElementById("content");
                        // 页面被文字铺满后实现滚动效果
                        content.scrollTop = content.scrollHeight;
                    }
                },
 
                onerror(err) {
                    throw err;
                },
            });复制