vue stream流实现打字效果+post请求

在现代前端开发中，流畅的用户体验和高效的网络请求是至关重要的。本文将介绍如何在 Vue.js 中结合 setInterval 和 fetch-event-source 实现一个具有打字效果的流式数据展示，并同时处理 POST 请求。

1. 项目背景

假设我们有一个需求：用户在前端输入一段文字，点击提交后，后端会返回一段流式数据（例如，逐字返回的文本）。我们需要在前端展示这段数据，并且以打字的效果逐字显示。同时，用户输入的内容需要通过 POST 请求发送到后端。

2. 技术选型

Vue3：前端框架，用于构建用户界面。
setInterval：用于实现逐字显示的打字效果。
fetch-event-source：用于处理服务器发送事件（SSE），实现流式数据的接收。

3. 实现步骤

3.1 安装依赖

首先，我们需要安装 fetch-event-source 库：

npm install @microsoft/fetch-event-source

3.2 主要代码逻辑

import { fetchEventSource } from '@microsoft/fetch-event-source';
 function stream(data) {
  loadingType.value = 1
  alltext = '' //接收到的文字
  showText.value = '';//显示的文字
  isalltext = false //是否全部接收完毕
  let isstarted = true //第一次成功返回
  controller = new AbortController();
  signal = controller.signal;
  if (timer) {
    clearInterval(timer)
  }
    fetchEventSource(url, {
      method: "POST",
      headers: {
        token: token,
        "Content-Type": "application/json"
      },
      // 具体传参
      body: JSON.stringify(data),
      openWhenHidden: true, // 在调用失败时禁止重复调用
      signal: signal,
      onmessage(event: any) {
        if (isstarted && alltext.length > 0) {
          isstarted = false
          loadingType.value = 2 //开始回答
          timer = setInterval(() => {
            let newalltext = alltext
            if (showText.value.length < newalltext.length) {
              showText.value += newalltext.substring(showText.value.length, showText.value.length + 4)
            } else {
              if (isalltext) {
                clearInterval(timer)
                showText.value = alltext;
                loadingType.value = 3
              }
            }
          }, 30)
        }

        if (event.data == '[DONE]') {
          isalltext = true
          controller.abort();
          return
        }
      
        var json = JSON.parse(event.data);
     
    if (json.content) {
          let text = json.content
         alltext = alltext + text
        }
      },
      onclose() {
        controller.abort();
      },
      onerror(err) {
        closeStream(networkTip.errText)
      }
    });
}

4. 总结

通过结合 setInterval 和 fetch-event-source，我们成功实现了在 Vue.js 中处理流式数据并以打字效果展示的功能。这种技术可以应用于多种场景，如聊天机器人、实时数据展示等，极大地提升了用户体验。

希望本文对你有所帮助，欢迎在评论区分享你的想法和经验！