前端获取流式数据

正常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);
	}
}

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值