前端数据的流式读取

在DeepSeek中我们发现，后端返回的数据是一段一段打印的，这是因为前端拿到head之后对后续数据进行流式读取，那么为什么要流式读取呢？生成式AI类的数据生成数据不是一次性可以生成的，需要逐步生成，前端为了及时的显示数据，所以需要对请求的数据进行流式读取。

 我们正常实现从后端获取数据实现如下

const url = ""

async function getRes(content) {
    const resp = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ content }),
    })
    const text = await resp.text();
    console.log(text);
}

如果这个方法用于类似生成式AI需要逐步生成的场景下，那么运行时间将会是等所有内容生成之后才执行，这会给用户造成不好的体验，那么如何解决呢？

const url = ""

async function getRes(content) {
    const resp = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ content }),
    })
    const reader = resp.body.getReader();
    const decoder = new TextDecoder();
    while (1) {
        const { done, value } = await reader.read();
        if (done) {
            break
        }
        const txt = decoder.decode(value);
        console.log(txt);
    }
}

resp.body.getReader()这个读取器为我们提供了一个可读流，调用读取器中的read()方法即可实现数据来多少读多少，这是一个异步方法，与之前的异步方法不同的是这个方法是来多少数据就读取多少数据，返回值是一个对象，里面有两个重要属性：{done,value}:done是一个布尔值，意思是有没有读完，value是读取到的值，是一个字节数组，如果想要转成文字，那么需要一个解码器decoder，调用decoder中的decode方法。