javascript - 前端如何接收流式数据?

Question

像一些大模型的 API,有的提供了流式的 API,允许一个字一个字来吐出数据。前端应该使用这些 API?

Answer 1

使用EventSource即可 https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource

Answer 2

const resp=await fetch(url,{    method:'POST',    headers:{        ‘Content-Type’:'application/json'    },    body:JSON.stringify({content:'123'})})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)      //txt就是一个一个的字 然后添加到页面上就可以了}

Answer 3

前端数据的返回本来就是流式返回的，不过通常情况下我们需要的是完整的响应体。如果需要类似于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);  }}

Answer 4

前端可以通过使用流式 API 来接收流式数据。流式 API 允许前端按需获取数据，避免了一次性加载大量数据导致的性能问题。

对于提供流式 API 的大模型，前端可以使用这些 API 来接收数据。通常，这些 API 会返回一个可读流对象，前端可以通过调用该对象的 read() 方法逐个获取数据。

具体实现方式可能因模型和框架而异，但一般来说，前端需要使用模型提供的 API 进行身份验证和参数设置，并使用返回的可读流对象来读取数据。

需要注意的是，流式数据的处理方式与一次性加载所有数据的方式有所不同。前端需要按照数据流的特点进行适当的处理，例如使用回调函数或 Promise 来处理异步读取数据等。

总之，前端可以通过使用流式 API 来接收流式数据，并按照模型和框架的规范进行相应的处理。