vue中sse响应处理(流式数据处理)

使用fetch请求

export function postStream(data) {
	return fetch('url-请求地址', {
		method: 'post',
		body: JSON.stringfy(data)，
		responseType: 'srteam',
		headers: {
			'Content-Type': 'application/json'
		}
	})
}

vue文件中使用

<script>
export default {
	data() {
		return {
			decoder: null,
			isEnd: true
		}
	},
	mounted() {
		// 定义一个utf-8格式的文本解码器	
		this.decoder = new TextDecoder('utf-8')
		this.getStream()
	},
	methods() {
		async getStream() {
			const res = await postStream({
				...(请求参数)
			})
			// 读取响应的原始字节流
			const reader = res.body.getReader()
			while (!this.isEnd) {
				await this.getText(reader) // 处理响应数据
			}
		},
		async getText(reader) {
			return new Promise(async (resolve, reject) => {
			// 读取流中的下一个数据块
			const { value, done: readerDone } = await reader.read()
			this.isEnd = readerDone
			// 将数据块解码为字符串
			let chunk = this.decoder.decode(value, { stream: true });
			if (chunk) {
				console.log(chunk)
				... // 响应数据处理
				// setTimeout(() => resolve(), 100)  可以通过设置定时器调节流显示速度
				resolve()
			} else resolve()
		  })
		}
	}
}
</script>