数据流在 React 客户端中不起作用

Question

我目前正在开发一个需要响应流的 React 应用程序。为了简化场景，假设我有一个每秒返回一个数字的端点。为此，我正在使用 Flask：

def stream():
    def generate():
        import math, time
        for i in range(10):
            yield
            time.sleep(1)

    return generate(), {"Content-Type": "text/plain"}

在我的 React 组件中，单击按钮将触发以下功能：

const readStream = () => {
  const xhr = new XMLHttpRequest();
  xhr.seenBytes = 0;
  xhr.open('GET', '/stream', true);
  xhr.onreadystatechange = function(){
    if (this.readyState === 3){
      const data = xhr.response.substr(xhr.seenBytes)
      console.log(data)
      setNumber(data)  // set state value that will be displayed elsewhere
      xhr.seenBytes = xhr.responseText.length;
    }
  }
  xhr.send();
}

出于某种原因，React 代码无法一次获取一个块，它只是一次转储所有数据。我已经验证在 vanilla JS 中使用相同的 ajax 请求是有效的。我也尝试过不同的方法，包括使用

fetch

和

axios

但到目前为止都没有用。

虽然我在这里使用

GET

，但我的实际用例需要

POST

，我必须从该响应中获取我的数据。

有什么我遗漏的吗？