前端根據(jù)后端返回的文本流逐個(gè)展示文本內(nèi)容代碼示例
前端根據(jù)后端返回的文本流逐個(gè)展示文本內(nèi)容
1、前端調(diào)用方法
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(`服務(wù)響應(yīng)失敗,請(qǐng)稍后重試`);
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); // 每次接收到數(shù)據(jù)時(shí),調(diào)用onSuccess
}
close();
return result;
}
2、使用
const onSend = () => {
if (!questionText.value.trim()) {
message('不能發(fā)送空消息', { 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;
}
);
};
經(jīng)過(guò)以上兩步,即可實(shí)現(xiàn)文本流逐個(gè)顯示在界面上。
總結(jié)
到此這篇關(guān)于前端根據(jù)后端返回的文本流逐個(gè)展示文本內(nèi)容的文章就介紹到這了,更多相關(guān)根據(jù)后端文本流展示文本內(nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用SyntaxHighlighter實(shí)現(xiàn)HTML高亮顯示代碼的方法
syntaxhighlighter是一個(gè)小開(kāi)源項(xiàng)目,它可以在網(wǎng)頁(yè)中對(duì)各種程序源代碼語(yǔ)法進(jìn)行加亮顯示。2010-02-02
JS函數(shù)修改html的元素內(nèi)容,及修改屬性內(nèi)容的方法
下面小編就為大家?guī)?lái)一篇JS函數(shù)修改html的元素內(nèi)容,及修改屬性內(nèi)容的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
layer.prompt使文本框?yàn)榭盏那闆r下也能點(diǎn)擊確定的方法
今天小編就為大家分享一篇layer.prompt使文本框?yàn)榭盏那闆r下也能點(diǎn)擊確定的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
GoJs中導(dǎo)出圖片或者SVG實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了GoJs中導(dǎo)出圖片或者SVG實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05
javaScript在表單提交時(shí)獲取表單數(shù)據(jù)的示例代碼
本文介紹了五種在JavaScript中獲取表單數(shù)據(jù)的方法:使用FormData對(duì)象、手動(dòng)提取表單數(shù)據(jù)、使用querySelector獲取單個(gè)字段數(shù)據(jù)、序列化為查詢字符串和配合AJAX提交表單數(shù)據(jù),每種方法都有示例代碼,幫助開(kāi)發(fā)者更好地理解和應(yīng)用2025-02-02
js中net::ERR_FILE_NOT_FOUND報(bào)錯(cuò)的解決
本文主要介紹了js中net::ERR_FILE_NOT_FOUND報(bào)錯(cuò)的解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
javascript實(shí)現(xiàn)勻速動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)勻速動(dòng)畫(huà)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
第一次記錄Bootstrap table學(xué)習(xí)筆記(1)
這篇文章主要為大家介紹了第一次學(xué)習(xí)Bootstrap table表格插件的筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05

