Streaming data
Streaming data refers to data generated and transmitted in a continuous manner, which is usually processed in real time or near real time.
Code section
This is the demo I used for testing. It requires a service to be combined with the backend to perform interface debugging. Now I will package the entire demo.
async getText() {
const decoder = new TextDecoder("utf-8")
try {
const test = "1"
const stream = await getAiText(test) // Get stream const reader = () // Get the stream reader
// Functions that read stream data const read = async () => {
const { done, value } = await () // Read the next data block if (done) {
("Stream complete")
return
}
const chunk = (value, { stream: true })
(chunk)//View data output setTimeout(() => {
+= chunk // Update text }, 200)
read() // Continue to read the next data block }
read() // Start reading stream data } catch (error) {
("Error fetching AI text:", error)
}
},
Demo, the compressed package cannot be sorted, please read the code
//I have made a cross-domain here,// /config/
export default defineConfig({
plugins: [vue(),
],
server: {
host: "0.0.0.0",
proxy: {
'/stream3': {
target: 'xxxxxxxxxxx', // Target server address changeOrigin: true, // Allow cross-domain rewrite: (path) => (/^\/api/, '') // Remove the /api prefix in the request path },
}
},
})
//Encapsulation of export request methodexport const getAiText = async (text) => {
const response = await fetch('/stream3', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: ({ test: text }),
})
return // Return to ReadableStream}
//Introduction to component page<template>
<div class='HelloWorld_wrap'>
<h1 @click="getText()">Click</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) // Get stream const reader = () // Get the stream reader
// Functions that read stream data const read = async () => {
const { done, value } = await () // Read the next data block if (done) {
("Stream complete")
return
}
const chunk = (value, { stream: true })
(chunk)//View data output setTimeout(() => {
+= chunk // Update text }, 200)
read() // Continue to read the next data block }
read() // Start reading stream data } catch (error) {
("Error fetching AI text:", error)
}
},
},
mounted() { },
});
</script>
<style lang="scss" scoped>
</style>
//Last introduced<script setup> import HelloWorld from './components/' </script> <template> <HelloWorld /> </template>
Summarize
This is the article about the front-end using fetch to receive streaming data processing. For more related content on fetch to receive streaming data, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!