前端使用fetch接收流式数据处理实例demo
作者：xiaoliyo_
这篇文章主要介绍了前端使用fetch接收流式数据处理的相关资料,文中描述了一个流式数据处理的demo,需要后端服务配合进行接口调试,需要的朋友可以参考下
流式数据
流式数据是指以连续的方式产生和传输的数据，这类数据通常在实时或接近实时的情况下进行处理
代码部分
这是我测试用的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>
总结
到此这篇关于前端使用fetch接收流式数据处理的文章就介绍到这了,更多相关前端fetch接收流式数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！