前端根據(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)文章
ionic 3.0+ 項(xiàng)目搭建運(yùn)行環(huán)境的教程
本篇文章主要介紹了ionic 3.0+ 項(xiàng)目搭建運(yùn)行的教程,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
javascript對(duì)JSON數(shù)據(jù)排序的3個(gè)例子
這篇文章主要介紹了javascript對(duì)JSON數(shù)據(jù)排序的3個(gè)例子的相關(guān)資料2014-04-04
使用TypeScript實(shí)現(xiàn)楊輝三角的代碼示例
楊輝三角,又稱帕斯卡三角,是一個(gè)數(shù)學(xué)上非常有趣和重要的概念,它是一種數(shù)學(xué)結(jié)構(gòu),它不僅可以用于組合數(shù)學(xué),還可以應(yīng)用于代數(shù)、概率和許多其他領(lǐng)域,在本文中,我們將通過(guò)使用?TypeScript?來(lái)編寫(xiě)楊輝三角的程序,同時(shí)深入探討?TypeScript?的類型系統(tǒng)2023-09-09
layer.open回調(diào)獲取彈出層參數(shù)的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layer.open回調(diào)獲取彈出層參數(shù)的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
淺談JS數(shù)組內(nèi)置遍歷方法有哪些和區(qū)別
本文主要介紹了淺談JS數(shù)組內(nèi)置遍歷方法有哪些和區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11
微信小程序用swiper實(shí)現(xiàn)滑動(dòng)刻度尺
這篇文章主要為大家詳細(xì)介紹了微信小程序用swiper實(shí)現(xiàn)滑動(dòng)刻度尺,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06

