大模型流式数据前端实现

像一些大模型的 API,有的提供了流式的 API,允许一个字一个字来吐出数据。前端该如何实现？

可以通过 fetch 请求的 getReader 实现。

类似于 chatgpt 一样一点一点的解析数据，不需要等到所有数据都返回才解析，这个是回来多少解析多少。

前端数据的返回本来就是流式返回的，不过通常情况下我们需要的是完整的响应体。如果需要类似于 ChatGPT 那种流式的返回，只需要将请求的响应体等待去掉就可以。要理解下面代码的两次await的作用：

async function getRes(content) {
  const res = await fetch(url, {...});
  // 从响应中提取 JSON 对象                             
  const data = await res.json();
  return data;
}

这里的第一个await是在等待服务器的响应，也就是服务器响应头到达客户端后，第一个await就会结束。

第二个await是在等待所有的响应体到达。

如果要流式读取，只需要修改第二个await的处理：

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) {
        // 读取数据流的第一块数据，done表示数据流是否完成，value表示当前的数
        const { done,value} = await reader.read();
        if (done) break;
        const txt = decoder.decode(value);
        console.log(done);
        console.log(txt);
    }
}

getResponse();