React 中使用 XMLHttpRequest 实现数据流式传输-js教程-PHP中文网

React 中使用 XMLHttpRequest 实现数据流式传输

聖光之護

发布： 2025-09-01 18:46:14

原创

680人浏览过

react 中使用 xmlhttprequest 实现数据流式传输

在 React 应用中实现数据流式传输，常常会遇到数据一次性加载而非分块接收的问题。本文将探讨如何使用 XMLHttpRequest 解决这一问题，并提供相应的代码示例和注意事项。

使用 onprogress 事件监听数据流

XMLHttpRequest 对象的 onreadystatechange 事件在整个请求过程中会触发多次，但它可能不会在每次接收到数据块时都触发，导致数据一次性加载。为了解决这个问题，可以使用 onprogress 事件。onprogress 事件专门用于在数据接收过程中周期性地触发。

以下是使用 onprogress 事件的示例代码：

const readStream = () => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/stream', true);
  xhr.seenBytes = 0;
  xhr.onprogress = function(event) {
    const data = xhr.response.substr(xhr.seenBytes);
    console.log(data);
    setNumber(data); // 设置状态值，该值将在其他地方显示
    xhr.seenBytes = xhr.responseText.length;
  };
  xhr.send();
};

登录后复制

这段代码的关键在于将 onreadystatechange 替换为 onprogress。onprogress 事件处理函数会在每次接收到新的数据块时被调用，从而允许我们逐块处理数据。

处理 React 状态更新

在 onprogress 事件处理函数中，setNumber(data) 用于更新 React 组件的状态。然而，直接更新状态可能导致 React 无法及时渲染，从而出现数据延迟显示的问题。为了解决这个问题，可以使用 setTimeout 函数将状态更新推迟到下一个事件循环中。

以下是使用 setTimeout 的示例代码：

const readStream = () => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/stream', true);
  xhr.seenBytes = 0;
  xhr.onprogress = function(event) {
    const data = xhr.response.substr(xhr.seenBytes);
    setTimeout(() => {
      setNumber(prevNumber => prevNumber + data); // 将接收到的块连接到先前的状态值
    }, 0);
    xhr.seenBytes = xhr.responseText.length;
  };
  xhr.send();
};

登录后复制

尽管 setTimeout 的延迟设置为 0 毫秒，但它仍然会将状态更新推迟到下一个事件循环中。这允许 React 在接收到每个数据块后进行渲染和更新 DOM。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

处理 POST 请求

上述示例使用 GET 请求。如果需要使用 POST 请求，则需要修改服务器端和客户端代码。

服务器端 (Flask) 代码：

from flask import Flask, Response, request

app = Flask(__name__)

@app.route('/stream', methods=['POST'])
def stream():
    def generate():
        import time
        data = request.get_json() # 获取 POST 请求中的数据
        for i in range(10):
            yield f'{data["value"]}-{i}\n'
            time.sleep(1)

    return Response(generate(), mimetype='text/plain')

if __name__ == '__main__':
    app.run(debug=True)

登录后复制

客户端 (React) 代码：

const readStream = () => {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/stream', true);
  xhr.setRequestHeader('Content-Type', 'application/json'); // 设置 Content-Type
  xhr.seenBytes = 0;
  xhr.onprogress = function(event) {
    const data = xhr.response.substr(xhr.seenBytes);
    setTimeout(() => {
      setNumber(prevNumber => prevNumber + data);
    }, 0);
    xhr.seenBytes = xhr.responseText.length;
  };
  xhr.send(JSON.stringify({ value: "test" })); // 发送 POST 数据
};

登录后复制

关键修改包括：

在服务器端，使用 @app.route('/stream', methods=['POST']) 允许 POST 请求，并使用 request.get_json() 获取请求体中的 JSON 数据。
在客户端，使用 xhr.open('POST', '/stream', true) 指定 POST 请求，并使用 xhr.setRequestHeader('Content-Type', 'application/json') 设置 Content-Type 为 application/json，然后使用 xhr.send(JSON.stringify({ value: "test" })) 发送 JSON 数据。

注意事项与总结

Content-Type 设置： 确保服务器端返回正确的 Content-Type，例如 text/plain 或 application/json。
错误处理： 添加错误处理逻辑，例如处理网络错误或服务器端错误。
资源释放： 在组件卸载时，取消未完成的请求，以避免内存泄漏。
现代替代方案： 考虑使用更现代的 Fetch API 或 Axios 库，它们提供了更简洁和灵活的 API 来处理流式数据。例如，Fetch API 的 ReadableStream 接口可以更好地处理数据流。

总而言之，通过使用 onprogress 事件和 setTimeout 技巧，可以在 React 应用中使用 XMLHttpRequest 实现数据流式传输。虽然 XMLHttpRequest 功能强大，但建议考虑使用 Fetch API 或 Axios 等更现代的替代方案，以获得更好的开发体验和性能。

以上就是React 中使用 XMLHttpRequest 实现数据流式传输的详细内容，更多请关注php中文网其它相关文章！