我要评论前端根据后端返回的文本流逐个展示文本内容
1、前端调用方法
async function fetchstream(url, data, onsuccess, close, error) {
const response = await fetch(url, {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: json.stringify(data)
});
if (!response.ok) {
onsuccess(`服务响应失败，请稍后重试`);
close();
throw new error(`http error! status: ${response.status}`);
}
const reader = response.body.getreader();
const decoder = new textdecoder();
let result = '';
while (true) {
const { done, value } = await reader.read();
if (done) {
break;
}
const decodedvalue = decoder.decode(value, { stream: true });
result += decodedvalue;
onsuccess && onsuccess(decodedvalue); // 每次接收到数据时，调用onsuccess
}
close();
return result;
}
2、使用
const onsend = () => {
if (!questiontext.value.trim()) {
message('不能发送空消息', { type: 'warning' });
return;
}
chatlist.value.push({
index: chatindex.value + 1,
type: 'user',
content: questionview.value
});
chatlist.value.push({
index: chatindex.value + 1,
type: 'assistant',
content: ''
});
const data = {
question: questionview.value,
modelid: props.modelid,
sessionid: sessionid.value
};
let streamcontent = '';
const onstreamsuccess = (chunk) => {
streamcontent += chunk;
chatlist.value[chatlist.value.length - 1].content = streamcontent.replace(/\n+/g, ' ').replace(/ {2,}/g, ' ');
scrolltobottom();
};
fetchstream(
'/ai/aiagent/stream',
data,
onstreamsuccess,
() => {
sendloading.value = false;
},
() => {
chatlist.value[chatlist.value.length - 1].content = '';
sendloading.value = false;
}
);
};
经过以上两步，即可实现文本流逐个显示在界面上。
总结
到此这篇关于前端根据后端返回的文本流逐个展示文本内容的文章就介绍到这了,更多相关根据后端文本流展示文本内容内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论