测试某接口返回8.9MB的JSON数据，前端dom花10秒左右才渲染出来完整数据，加载过程一直是白屏，造成用户体验极差，还容易造成卡死。不得不上这招了，顺便记录一下解决办法。
原理
请求接口成功后，通过response.body获取到可读流（ReadableStream）。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>流式加载JSON接口数据</title>
</head>
<body>
<pre id="data-list"></pre>
<script>
const apiUrl = '修改此处为接口URL地址';
let isReading = false;
fetch(apiUrl)
.then(response => response.body && response.body.getReader())
.then(reader => {
const decoder = new TextDecoder("utf-8");
let chunks = "";
function read() {
if (!isReading) return;
reader.read().then(({ done, value }) => {
if (done) {
isReading = false;
alert('数据流式展示完毕！');
return;
}
chunks += decoder.decode(value, { stream: true });
const lines = chunks.split('\n');
chunks = lines.pop();
document.getElementById("data-list").textContent += lines.join("\n") + "\n";
read();
}).catch(console.error);
}
isReading = true;
read();
})
.catch(console.error);
</script>
</body>
</html>
