如何解決前端JavaScript處理流式響應(yīng)的坑

更新時(shí)間：2025年06月27日 11:27:01 作者：小周同學(xué):

axios是一個(gè)支持node端和瀏覽器端的易用、簡(jiǎn)潔且高效的http庫,這篇文章主要介紹了如何解決前端JavaScript處理流式響應(yīng)的坑,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

為什么瀏覽器中的 Axios 不能直接處理流？

1. 底層機(jī)制差異

Node.js 環(huán)境：Axios 使用 Node.js 的 http 模塊，天然支持流式傳輸（responseType:
‘stream’），數(shù)據(jù)可以逐塊（chunk）接收。
瀏覽器環(huán)境：瀏覽器端 Axios 基于 XMLHttpRequest，而 XMLHttpRequest 的 responseType
屬性不允許設(shè)為 stream，合法值僅有： arraybuffer | blob | document | json | text。

即使服務(wù)端返回流式響應(yīng)（如 text/event-stream 或分塊數(shù)據(jù)），瀏覽器也無法通過 Axios 直接以流的形式逐塊解析數(shù)據(jù)。Axios 在瀏覽器中只能一次性接收完整響應(yīng)，再通過字符串或文本處理模擬“流式效果”。

2. 如果必須使用 Axios

可以通過更改 responseType: ‘text’ 和手動(dòng)分塊處理模擬流式效果，但存在以下問題：
數(shù)據(jù)完整性風(fēng)險(xiǎn)：依賴服務(wù)端分塊的準(zhǔn)確性，需維護(hù)緩沖區(qū)（buffer）處理不完整數(shù)據(jù)。性能損失：需手動(dòng)分割字符串，效率低于原生流式處理。

  <script>
    // fetch 請(qǐng)求，stream 流式響應(yīng)
    async function fetchStreaming () {
      const response = await fetch('http://192.168.21.24:11434/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        // 請(qǐng)求傳遞給 ollama 數(shù)據(jù)
        body: JSON.stringify({
          model: 'deepseek-r1:32b',
          messages: [
            { "role": "user", "content": "北京天安門看升旗儀式怎么預(yù)約？" }
          ]
        })
      })

      if (!response.body) {
        throw new Error('Response body is null')
      }
      // 讀取數(shù)據(jù)流
      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)
              // 實(shí)時(shí)輸出
              console.log(data.message.content)
            } catch (err) {
              console.error('解析錯(cuò)誤:', err)
            }
          }
        }
      }
    }

    fetchStreaming()



  </script>