web前端之JavaScript实现数据的流式获取、一边传输一边解析、fetch、getReader、TextDecoder、read、decode

---

前言

1、此功能类似于GTP一样一点一点的解析数据，不需要等到所有数据都返回才解析，这个是回来多少解析多少。
2、代码中的url是真实的URL，只是读取的是列表，所以流式的效果不是很明显，如果想要明显的效果，可以自己实现一个接口返回字符串即可。

---

代码

const url = 'http://jsonplaceholder.typicode.com/posts';

async function getResponse() {
    
    
    const resp = await fetch(url, {
    
    
        method: 'GET',
        headers: {
    
    
            'Content-Type': 'application/json'
        }
    });

    const reader = resp.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
    
    
        const {
    
    
            done,
            value
        } = await reader.read();

        if (done) break;

        const txt = decoder.decode(value);

        console.log(done);
        console.log(txt);
    }
}

getResponse();

---

TextDecoder

MDN

TextDecoder接口表示一个文本解码器，一个解码器只支持一种特定文本编码，例如UTF-8、ISO-8859-2、KOI8-R、GBK，等等。解码器将字节流作为输入，并提供码位流作为输出。
备注：此特性在Web Worker中可用

---

getReader

MDN

ReadableStream接口的getReader()方法会创建一个reader，并将流锁定。只有当前reader将流释放后，其他reader才能使用。

---

fetch

W3SCHOOL

Fetch API接口允许Web浏览器向Web服务器发出HTTP请求。
不再需要XMLHttpRequest。

---

MDN

Fetch API提供了一个JavaScript接口，用于访问和操纵HTTP管道的一些具体部分，例如请求和响应。它还提供了一个全局fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
这种功能以前是使用XMLHttpRequest实现的。Fetch提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如Service Workers。Fetch还提供了专门的逻辑空间来定义其他与HTTP相关的概念，例如CORS和HTTP的扩展。
请注意，fetch规范与jQuery.ajax()主要有以下的不同：
当接收到一个代表错误的HTTP状态码时，从fetch()返回的Promise不会被标记为reject，即使响应的HTTP状态码是404或500。相反，它会将Promise状态标记为resolve(如果响应的HTTP状态码不在200-299的范围内，则设置 resolve返回值的ok属性为false)，仅当网络故障时或请求被阻止时，才会标记为reject。
fetch不会发送跨域cookie，除非你使用了credentials的初始化选项。(自2018年8月以后，默认的credentials政策变更为same-origin。Firefox也在61.0b13版本中进行了修改)
更详细介绍