前端如何接收流式数据?-灵析社区

前端数据的返回本来就是流式返回的，不过通常情况下我们需要的是完整的响应体。如果需要类似于ChatGPT那种流式的返回，只需要将请求的响应体等待去掉就可以。要理解下面代码的两次`await`的作用： async function getRes(content) { const res = await fetch(url, {...}); const data = await res.text(); return data; } 这里的第一个`await`是在等待服务器的响应，也就是服务器响应头到达客户端后，第一个`await`就会结束。 第二个`await`是在等待所有的响应体到达。 如果要流式读取，只需要修改第二个`await`的处理： async function getRes(content) { const res = await fetch(url, {...}); const reader = res.body.getReader(); // 读取数据流的第一块数据，done表示数据流是否完成，value表示当前的数 const {done, value} = await reader.read(); // 上面读取到的是数据的字节码，还需要处理字节码为文本 const decoder = new TextDecoder(); const text = decoder.decode(value); // 打印第一块的文本内容 console.log(text, done); } 上面的示例只读了第一块数据，通过循环来完成所有流数据的读取： async function getRes(content) { const res = await fetch(url, {...}); const reader = res.body.getReader(); const decoder = new TextDecoder(); while(1) { // 读取数据流的第一块数据，done表示数据流是否完成，value表示当前的数 const {done, value} = await reader.read(); if (done) break; const text = decoder.decode(value); // 打印第一块的文本内容 console.log(text, done); } }