前言
此处为一个流式接口的对话,前端需要以流式的方式进行输出。前端框架使用Vue3
说明:此处将展示对话内容的多于元素已删除,只保留了消息体的HTML。
<div v-for="item in data" class="chat-item">
<div :class="'message ' + item.type">
<div class="response-info">
<span class="message-text">{
{ item.content }}</span>
</div>
</div>
</div>
定义streamChatData为获取流式数据的方法。在data不断变化的过程中,HTML中的消息就会以流式的方式打印出来。
const streamChatData = async (params) => {
// data为存储对话的数组
data.value.push({
type: 'response',
content: '正在获取答案中...'