在 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, requestapp = 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 实现数据流式传输的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519001.html
微信扫一扫 
支付宝扫一扫 
