需求:后端接口使用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;
},
});