前端如何接收流式数据?

changli

1.2k460156

发布于
2023-11-01 广东

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

前端 javascript

阅读 7.4k

AI BotBETA

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

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

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

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

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

3 个回答

得票最新

youth君

1867

发布于
2023-11-01 陕西

✓ 已被采纳

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

bing

275720

发布于
2023-11-01 广东

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就是一个一个的字 然后添加到页面上就可以了
}