使用fetch流式获取响应数据

322 字

2 分钟

使用fetch流式获取响应数据

2025-03-13

fetch

javascript

/

fetch

前言简介：#

流式获取一般在用于数据量比较大的情况，一次性返回会导致前端页面加载时间过长或者请求超时等问题，这时候我们就可以考虑使用流式的方式拿到部分数据并先展示，从而提升用户体验。我这里的场景是在对接chatGPT语言模型的时候采取的这种方案，因为目前的大语言的模型的结果都是需要一点点计算的，如果提出的问题比较复杂就导致响应的时间过长。

这里我们采用浏览器原生的fetchAP来实现#

1
fetch('<请求地址>', {
2
    method: 'POST', // 请求方法
3
    headers: {
4
        "Content-Type": "application/json",  // 请求头
5
        Authorization: token // 校验令牌，根据自己的服务器需求传
6
    },
7
    body: JSON.stringify({  // 请求体
8
        prompt: [{role: 'user', content: data}],
9
        incremental: true
10
    })
11
}).then(async result => {
12
    const reader = result.body.getReader() // 创建读取器
13
    const textDecoder = new TextDecoder() // 创建解码器
14
    while(true){  // 循环读取内容
15
        /* 读取其中一部分内容 done 是否读取完成， value 读取到的内容 */
16
        const {done, value} = await reader.read()
17
        if(done){
18
            return
19
        }
20
        const str = textDecoder.decode(value) // 利用解码器把数据解析成字符串
21
        console.log(str) // 这时候str就是服务器返回的内容
22
    }
23
})