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

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

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;
    }
  );
};

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

相关推荐
前端百草阁13 分钟前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜14 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40415 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish15 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple15 分钟前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five16 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序16 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54117 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
酷酷的威朗普18 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端每日三省18 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript