如何解决前端JavaScript处理流式响应的坑

  <script>
    // fetch 请求，stream 流式响应
    async function fetchStreaming () {
      const response = await fetch('http://192.168.21.24:11434/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        // 请求传递给 ollama 数据
        body: JSON.stringify({
          model: 'deepseek-r1:32b',
          messages: [
            { "role": "user", "content": "北京天安门看升旗仪式怎么预约？" }
          ]
        })
      })

      if (!response.body) {
        throw new Error('Response body is null')
      }
      // 读取数据流
      const reader = response.body.getReader()
      // 文本解码器
      const decoder = new TextDecoder()
      let buffer = ''

      while (true) {
        const { done, value } = await reader.read()
        if (done) break

        buffer += decoder.decode(value, { stream: true })
        const lines = buffer.split('\n')
        buffer = lines.pop() || ''

        for (const line of lines) {
          if (line.trim()) {
            try {
              const data = JSON.parse(line)
              // 实时输出
              console.log(data.message.content)
            } catch (err) {
              console.error('解析错误:', err)
            }
          }
        }
      }
    }

    fetchStreaming()



  </script>