优化大数据接口请求

①前情概要：当加载后端的一个接口或去请求一个网站内容比较多时【比如内容大概1.5M】

②问题：加载时间将非常长，页面白屏时间非常长

1、场景复现

（1）以天行API请求为例子

async function loadData(){// 请求地址urlconst url = 'https://apis.tianapi.com/tiangou/index?key=你的APIKEY';const response = await fetch(url);const text = await response.text();console.log(text);
}
loadData()

（2）分析图 

---

2、优化方式：读流

（1）实现效果

async function loadData(){// 请求地址urlconst url = 'https://apis.tianapi.com/tiangou/index?key=你的APIKEY';const response = await fetch(url);// const text = await response.text();// 读流const reader = response.body.getReader();const {value, done} = await reader.read();//该方法是异步的// value：一块一块的值，done：是否读完了console.log(value, done);
}
loadData()

value值输出的Uint8Array是什么呢？

（2）TextEncoder

作用：可以把码位流转成Uint8Array字节流

TextEncoder - Web API 接口参考 | MDNTextEncoder 接受码位流作为输入，并提供 UTF-8 字节流作为输出。https://developer.mozilla.org/zh-CN/docs/Web/API/TextEncoder

（3）TextDecoder

作用：解码生成码位流

通过最后这步解码，即可得到，一块一块输出的数据啦

async function loadData(){// 请求地址urlconst url = 'https://apis.tianapi.com/tiangou/index?key=你的APIKEY';const response = await fetch(url);// const text = await response.text();// 读流const reader = response.body.getReader();let utf8decoder = new TextDecoder();for(;;){const {value, done} = await reader.read();if(done){break;}const text = utf8decoder.decode(value);console.log(text);}
}
loadData()

---

3、最后

（1）本篇例子是将数据读成text文本流，当然还可以读成json

（2）流还可以是文本、文件、图片