在 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。
处理 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 等更现代的替代方案，以获得更好的开发体验和性能。
