使用 fetch 获取接口返回的流式数据

需求描述：前端进行提问，接口这边使用AI进行答疑，回答内容流式输出到前端。接口的 Response Headers 的 Content-Type 为 text/event-stream; charset=utf-8。

前端实现：

/** 获取答案 */
export const getAnswer = (params) => {
  return fetch('https://gpt.xxxx.com/chat',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`
      },
      body: JSON.stringify(params)
    }
  )
}


// 调用
getAnswer({
  question: '为啥？'
})
  .then(async response => {
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }

    // 确保响应是可读流
    if (!response.body) {
      throw new Error('Response body is not available')
    }

    const reader = response.body.getReader()
    const textDecoder = new TextDecoder()
    let result = true
    let output = ''
    while (result) {
      const { done, value } = await reader.read()

      if (done) {
        console.log('Stream ended')
        result = false
        break
      }

      const chunkText = textDecoder.decode(value)
      output += chunkText
    }
    console.log('output:', output)
  })
  .catch(() => {
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

为什么不用 axios：开始也尝试使用过 axios，设置 responseType: 'stream'，但并没有实现流式输出。