使用fetch流式获取响应数据

前言简介：

流式获取一般在用于数据量比较大的情况，一次性返回会导致前端页面加载时间过长或者请求超时等问题，这时候我们就可以考虑使用流式的方式拿到部分数据并先展示，从而提升用户体验。

我这里的场景是在对接chatGPT语言模型的时候采取的这种方案，因为目前的大语言的模型的结果都是需要一点点计算的，如果提出的问题比较复杂就导致响应的时间过长。

这里我们采用浏览器原生的fetchAP来实现

fetch('<请求地址>', {
	method: 'POST', // 请求方法
	headers: {
		"Content-Type": "application/json",  // 请求头
		Authorization: token // 校验令牌，根据自己的服务器需求传
	},
	body: JSON.stringify({  // 请求体
		prompt: [{role: 'user', content: data}],
		incremental: true
	})
}).then(async result => {
    const reader = result.body.getReader() // 创建读取器
	const textDecoder = new TextDecoder() // 创建解码器
	while(true){  // 循环读取内容
        /* 读取其中一部分内容 done 是否读取完成， value 读取到的内容 */
		const {done, value} = await reader.read() 
		if(done){
			return
		}
		const str = textDecoder.decode(value) // 利用解码器把数据解析成字符串
		console.log(str) // 这时候str就是服务器返回的内容
	}
})