前端根据后端返回的文本流逐个展示文本内容

前端根据后端返回的文本流逐个展示文本内容

1、前端调用方法

js 复制代码
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、使用

js 复制代码
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;
    }
  );
};

经过以上两步,即可实现文本流逐个显示在界面上。

相关推荐
GDAL13 分钟前
npm入门教程13:npm workspace功能
前端·npm·node.js
呼叫694524 分钟前
为什么说vue是双向数据流
前端·javascript·vue.js
我命由我1234534 分钟前
CesiumJS 案例 P20:监听鼠标滚轮、监听鼠标左键按下与松开、监听鼠标右键按下与松开、监听鼠标左击落点
开发语言·前端·javascript·前端框架·html·css3·html5
wumu_Love1 小时前
npm 和 node 总结
前端·npm·node.js
顾辰呀1 小时前
css 文字一行没有放满不进行换行
前端·javascript·css·vue.js·css3
q567315231 小时前
Python 中的字符串匹配算法
android·java·javascript·python·算法
nixiaoge1 小时前
Web前端第二次作业
前端·javascript·css3
安冬的码畜日常2 小时前
【玩转 Postman 接口测试与开发2_005】第六章:Postman 测试脚本的创建(上)
javascript·测试工具·单元测试·postman·bdd·chai
浮华似水2 小时前
Docker入门系列——镜像原理
前端
Gavin_9152 小时前
【JavaScript】数组-集合-Map-对象-Class用法一览
开发语言·前端·javascript