正常http交互后端返回大量数据,前端需要接口拿到所有的响应体才能操作数据,这个时候就用到了数据流,后端返回一块数据拿一块数据(服务器也需要流式输出),可以极大的减少等待时间
async function requert(){
const http = await fetch('http://localhost:8888/api/getMes')
// 拿到响应头,body:把数据转换可流式(分块)读取,getReader():返回一个遍历器
const reader = http.body.getReader()
// 循环读取数据流
while (true) {
// read():读取当前流
// done: 布尔类型false表示数据没有读完 true:表示已读完数据流
// value: 当前数据流中的数据,它是utf-8文字编码格式,需要解码
const {done, value} = await reader.read()
// 创建解码器对象
const decoder = new TextDecoder('utf-8');
if(done){
break
}
// 对数据进行解码
const decodedString = decoder.decode(value);
console.log('数据-->',decodedString);
}
}