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

问题描述 投票:0回答:0

我目前正在开发一个需要响应流的 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
,我必须从该响应中获取我的数据。

有什么我遗漏的吗?

javascript reactjs ajax stream xmlhttprequest
© www.soinside.com 2019 - 2024. All rights reserved.