示例:
// An highlighted block
asnyc function loadFile(){
const url = '地址';
const resp = await fetch(url);
const txt = await resp.text();
console.log(txt)
}
loadFile();
上面示例会出现的问题:如果用户的网络不是很好,会出现等很久很久都无法拿到服务器的响应结果,如果需要在页面上做显示,会导致看不到东西,一直在请求,客户端白屏,用户体验不好。
造成白屏的原因:
此行代码代表,响应头传输完毕
const resp = await fetch(url);
此行代码代表,响应体传输完毕,但是数据过大的话,导致传输过程十分漫长,导致了白屏
const txt = await resp.text();
解决:
就不能使用这种方式
const txt = await resp.text();
使用分片处理替代,使用一些API
asnyc function loadFile(){
const url = '地址';
const resp = await fetch(url);
//const txt = await resp.text();
const reader = resp.body.getReader(); //分片读取
//不管是图片还是文字,read()函数统一把它当作一个字节数组
//console.log(value) ;
//文本解码器
const decoder = new TextDecoder()
//使用死循环去读一次后续加载的内容
for(;;){
//读取响应体中目前传输的一部分,value代表读出的一小块数据,done代表是否读完数据
const {value,done} = awwit reader.read() ;
if(done){
break;
}
const text = decoder.decode(value)
console.log(text);//读出已经传输完毕的数据
}
}
loadFile();
一些小问题:
一块一块的读数据,可能会出现,第一块数据的最后一个字节是第二块数据的第一个字节。解码时会出现乱码。