React应用中处理数据流：XMLHttpRequest的优化与实践-js教程-PHP中文网

React应用中处理数据流：XMLHttpRequest的优化与实践

本文深入探讨了在React应用中使用XMLHttpRequest处理数据流时遇到的常见问题，特别是数据无法按块实时接收的挑战。核心解决方案在于将onreadystatechange事件替换为更适合跟踪数据接收进度的onprogress事件，并结合setTimeout(0)技巧优化React状态更新，确保UI能够及时响应流式数据。文章还涵盖了如何适应POST请求场景，并推荐了更现代的HTTP请求API。

引言

在现代web应用开发中，实时数据流（streaming data）扮演着越来越重要的角色，例如服务器发送事件（sse）、长轮询或处理大型文件上传/下载进度。当客户端需要接收服务器持续发送的数据块时，正确地处理这些数据流至关重要。本文将聚焦于react应用中，如何利用xmlhttprequest（xhr）有效地接收和处理服务器端的数据流，解决数据一次性全部接收而非按块接收的问题，并提供相应的优化实践。

理解数据流与XMLHttpRequest的挑战

在典型的Web应用中，XMLHttpRequest是发起HTTP请求的常用API。对于非流式请求，我们通常在readyState为4（请求完成）时处理响应数据。然而，对于数据流场景，服务器会分批次发送数据，客户端需要能够实时接收这些数据块。

最初尝试使用xhr.onreadystatechange事件来监听数据流可能会遇到问题。尽管readyState为3（正在接收响应）时表示数据正在传输，但在某些浏览器或特定配置下，onreadystatechange事件可能不会在每个数据块到达时都频繁触发，或者在React环境中，状态更新机制可能导致数据累积后才一次性处理。这会导致客户端无法实时获取数据流的最新部分，而是等待整个响应完成才一次性接收所有数据。

考虑以下一个简单的Flask服务器端示例，它每秒发送一个数字：

from flask import Flask, Response
import time

app = Flask(__name__)

@app.route('/stream')
def stream():
    def generate():
        for i in range(10):
            yield f'{i}\n'
            time.sleep(1)
    return Response(generate(), mimetype='text/plain')

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

登录后复制

在React客户端，如果使用如下onreadystatechange的实现，很可能会遇到数据一次性全部接收的问题：

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("Received chunk (onreadystatechange):", data);
      // setNumber(data); // 尝试更新状态
      xhr.seenBytes = xhr.responseText.length;
    }
  };
  xhr.send();
};

登录后复制

这种情况下，console.log可能不会按预期每秒输出一个数字，而是等到整个流结束后一次性输出所有数据。

核心解决方案：利用xhr.onprogress事件

为了解决onreadystatechange在数据流处理中的局限性，我们应该利用XMLHttpRequest提供的onprogress事件。onprogress事件专门用于跟踪HTTP请求的进度，它会在浏览器接收到数据时周期性地触发，非常适合处理数据流。

当onprogress事件触发时，xhr.responseText（或xhr.response）会包含所有已接收到的数据。我们可以通过维护一个已处理字节数的计数器（例如xhr.seenBytes），来提取每次onprogress事件触发时新接收到的数据块。

以下是使用onprogress事件进行数据流处理的修正代码：

const readStream = () => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/stream', true);
  xhr.seenBytes = 0; // 初始化已处理字节数
  xhr.onprogress = function(event) {
    // xhr.response 包含所有已接收的数据
    // 使用 substr 从上次处理的位置开始提取新数据
    const newChunk = xhr.response.substr(xhr.seenBytes);
    console.log("Received chunk (onprogress):", newChunk);
    // 更新状态值，稍后会详细讨论React状态更新
    // setNumber(newChunk);
    // 更新已处理字节数
    xhr.seenBytes = xhr.responseText.length;
  };
  xhr.send();
};

登录后复制

通过将onreadystatechange替换为onprogress，并正确维护seenBytes，我们现在能够确保在每个数据块到达时都触发相应的处理逻辑，从而实现数据的实时接收。

React状态更新与流式数据处理

尽管onprogress解决了数据块的实时接收问题，但在React应用中直接调用setNumber(newChunk)可能会遇到另一个挑战。React的批处理（batching）机制和渲染周期可能导致即使onprogress事件频繁触发，UI更新也无法立即反映每个新数据块。例如，如果连续快速接收到多个数据块，React可能会将这些状态更新合并，导致UI看起来仍然是一次性更新。

为了确保React组件能够及时地响应每个数据块并更新UI，我们可以使用setTimeout与0毫秒延迟的技巧。将状态更新操作包裹在setTimeout(..., 0)中，可以将其推迟到当前事件循环的下一个“tick”，从而允许React在每次接收到新数据块后有机会进行渲染。同时，由于数据流是连续的，我们通常需要将新接收到的数据块追加到现有的状态值上，而不是简单地替换它。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

以下是结合onprogress和setTimeout的完整React客户端代码示例：

import React, { useState } from 'react';

function StreamingComponent() {
  const [streamedData, setStreamedData] = useState(''); // 用于累加接收到的数据

  const readStream = () => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/stream', true);
    xhr.seenBytes = 0; // 初始化已处理字节数

    xhr.onprogress = function(event) {
      // 提取新接收到的数据块
      const newChunk = xhr.response.substr(xhr.seenBytes);
      console.log("Received chunk:", newChunk);

      // 使用 setTimeout 确保状态更新在下一个事件循环中执行，
      // 并使用函数式更新来累加数据
      setTimeout(() => {
        setStreamedData(prevData => prevData + newChunk);
      }, 0);

      // 更新已处理字节数
      xhr.seenBytes = xhr.responseText.length;
    };

    xhr.onload = function() {
      // 流结束时的处理，例如显示“流已完成”
      console.log("Stream finished.");
    };

    xhr.onerror = function() {
      console.error("Stream error.");
    };

    xhr.send();
  };

  return (
    <div>
      <button onClick={readStream}>开始接收数据流</button>
      <h3>接收到的数据:</h3>
      <pre>{streamedData}</pre>
    </div>
  );
}

export default StreamingComponent;

登录后复制

在这个优化后的代码中：

setStreamedData(prevData => prevData + newChunk) 使用了React函数式状态更新，确保在基于前一个状态值的基础上安全地追加新数据。
setTimeout(() => { ... }, 0) 将状态更新操作推迟，允许React在处理完当前事件循环后重新渲染，从而实现更平滑的UI更新。
添加了onload和onerror事件处理器，以更好地处理流的生命周期。

处理POST请求的数据流

在实际应用中，数据流可能需要通过POST请求发送，例如客户端需要发送一些初始化数据或认证信息给服务器。XMLHttpRequest同样支持POST请求的数据流处理。

服务器端（Flask）调整： 将路由方法修改为接受POST请求。

from flask import Flask, Response, request
import time

app = Flask(__name__)

@app.route('/stream', methods=['POST']) # 允许POST请求
def stream():
    # 可以在这里处理request.data或request.json等POST请求体内容
    # 例如：initial_data = request.json
    def generate():
        for i in range(10):
            yield f'POSTed data chunk {i}\n'
            time.sleep(1)
    return Response(generate(), mimetype='text/plain')

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

登录后复制

客户端（React）调整： 修改xhr.open方法，指定为POST请求，并可以在xhr.send()中发送请求体数据。

const readStreamWithPost = () => {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/stream', true); // 指定为POST请求
  xhr.seenBytes = 0;

  // 如果需要发送请求体数据，例如JSON
  // xhr.setRequestHeader('Content-Type', 'application/json');
  // const requestBody = JSON.stringify({ initialParam: 'value' });

  xhr.onprogress = function(event) {
    const newChunk = xhr.response.substr(xhr.seenBytes);
    setTimeout(() => {
      setStreamedData(prevData => prevData + newChunk);
    }, 0);
    xhr.seenBytes = xhr.responseText.length;
  };

  xhr.onload = () => console.log("POST Stream finished.");
  xhr.onerror = () => console.error("POST Stream error.");

  // 发送请求体数据，如果不需要则保持为空
  xhr.send(/* requestBody */);
};

登录后复制

通过这些修改，XMLHttpRequest能够以POST方法发起请求并接收服务器返回的数据流。

现代替代方案与最佳实践

尽管XMLHttpRequest在处理数据流方面仍然有效，但在新的Web开发中，更推荐使用现代的API来处理HTTP请求，它们提供了更简洁、更强大的功能，尤其是在处理流方面：

Fetch API: Fetch API是浏览器原生提供的、基于Promise的HTTP请求接口，它提供了更灵活的配置和更易于理解的API。Fetch API结合ReadableStream可以更好地处理数据流。例如，通过response.body.getReader()可以获取一个读取器来逐块读取响应流。
Axios: Axios是一个流行的基于Promise的HTTP客户端，它在Fetch API的基础上提供了更高级的特性，如请求/响应拦截器、取消请求等。虽然Axios本身不直接提供像onprogress那样的流式读取事件（它通常等待响应完成），但可以通过配置responseType: 'stream'或结合onDownloadProgress事件来处理进度，对于真正的ReadableStream支持，可能需要结合Fetch API或更底层的Node.js流API。

对于需要高度控制和细粒度流处理的场景，Fetch API配合ReadableStream是目前最推荐的浏览器端解决方案。

总结

在React应用中处理XMLHttpRequest数据流的关键在于理解其事件机制。通过将监听事件从onreadystatechange切换到onprogress，可以确保数据按块实时接收。结合setTimeout(0)技巧和函数式状态更新，可以有效解决React组件在处理高频数据流时的UI更新延迟问题。无论是GET还是POST请求，XMLHttpRequest的流式处理逻辑都是相似的。尽管如此，对于新的项目或更复杂的流处理需求，Fetch API及其ReadableStream提供了更现代、更强大的解决方案。掌握这些技术，将有助于构建响应更及时、用户体验更好的Web应用。

以上就是React应用中处理数据流：XMLHttpRequest的优化与实践的详细内容，更多请关注php中文网其它相关文章！