前端使用 fetch 接收流式数据处理

流式数据

流式数据是指以连续的方式产生和传输的数据，这类数据通常在实时或接近实时的情况下进行处理

代码部分

这是我测试用的demo，需要后端配合起来一个服务，进行接口调试，下面我把整个demo打包出来

 async getText() {
      const decoder = new TextDecoder("utf-8")
      try {
        const test = "1"
        const stream = await getAiText(test) // 获取流
        const reader = stream.getReader() // 获取流的读取器

        // 读取流数据的函数
        const read = async () => {
          const { done, value } = await reader.read() // 读取下一个数据块
          if (done) {
            console.log("Stream complete")
            return
          }
          const chunk = decoder.decode(value, { stream: true })
          console.log(chunk)//查看数据输出
          setTimeout(() => {
            this.text += chunk // 更新 text
          }, 200)
          read() // 继续读取下一个数据块
        }

        read() // 开始读取流数据
      } catch (error) {
        console.error("Error fetching AI text:", error)
      }
    },

demo，压缩包整不了，看代码吧

//我这里做了个跨域，vite.config.js
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(),

    ],
    server: {
        host: "0.0.0.0",
        proxy: {
            '/stream3': {
                target: 'xxxxxxxxxxx', // 目标服务器地址
                changeOrigin: true, // 允许跨域
                rewrite: (path) => path.replace(/^\/api/, '') // 去掉请求路径中的/api前缀
            },
        }
    },
})

//封装导出请求方法
export const getAiText = async (text) => {
    const response = await fetch('/stream3', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ test: text }),
    })
    return response.body // 返回 ReadableStream
}

//组件页面引入
<template>
  <div class='HelloWorld_wrap'>
    <h1 @click="getText()">点击</h1>
    {{text}}
  </div>
</template>
<script >
import { getAiText } from "../http/testAi"
import {
  defineComponent,
  ref,
  onMounted,
  onUpdated,
  toRefs,
  reactive,
} from "vue"
export default defineComponent({
  name: "HelloWorld",
  props: {},
  data() {
    return {
      text: "",
    }
  },
  methods: {
    async getText() {
      const decoder = new TextDecoder("utf-8")
      try {
        const test = "1"
        const stream = await getAiText(test) // 获取流
        const reader = stream.getReader() // 获取流的读取器

        // 读取流数据的函数
        const read = async () => {
          const { done, value } = await reader.read() // 读取下一个数据块
          if (done) {
            console.log("Stream complete")
            return
          }
          const chunk = decoder.decode(value, { stream: true })
          console.log(chunk)//查看数据输出
          setTimeout(() => {
            this.text += chunk // 更新 text
          }, 200)
          read() // 继续读取下一个数据块
        }

        read() // 开始读取流数据
      } catch (error) {
        console.error("Error fetching AI text:", error)
      }
    },
  },
  mounted() { },
});
</script>
<style lang="scss" scoped>
</style>

//最后app.vue引入
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>