uni-app中为什么安卓端plus.net.XMLHttpRequest()的onprogress无法实时监听后端传来的流式数据，只有在开始和结束的时候调用了一次

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app中为什么安卓端plus.net.XMLHttpRequest()的onprogress无法实时监听后端传来的流式数据，只有在开始和结束的时候调用了一次
// 监听下载进度 xhr.onprogress = function (event) { console.log(‘下载进度：’, event); };


| 项目创建方式 | 开发环境 | 版本号 |
| --- | --- | --- |
| 无相关信息 | 无相关信息 | 无相关信息 |
Harmonyos Next教程
1 回复

在uni-app中，使用plus.net.XMLHttpRequest()进行网络请求时，onprogress事件应该能够实时监听后端传来的流式数据。然而，如果在安卓端发现onprogress事件只在开始和结束时被调用，这可能是由于多种原因导致的。下面，我将提供一个基本的代码示例，并探讨可能导致该问题的几个常见原因及相应的排查方法。

代码示例

const xhr = new plus.net.XMLHttpRequest();
xhr.open('GET', 'http://example.com/stream', true);

xhr.responseType = 'blob'; // 或者 'arraybuffer'，根据后端返回的数据类型设置

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log('Stream received:', xhr.response);
        } else {
            console.error('Request failed:', xhr.status);
        }
    }
};

xhr.onprogress = function (event) {
    if (event.lengthComputable) {
        const percentComplete = (event.loaded / event.total) * 100;
        console.log(`Received ${event.loaded} bytes of ${event.total} bytes (${percentComplete.toFixed(2)}%)`);
        // 处理流式数据，例如更新UI
    } else {
        // 对于不可计算的长度，可以处理接收到的数据块
        console.log('Received data chunk:', event.loaded);
    }
};

xhr.onerror = function () {
    console.error('Network error');
};

xhr.send();

可能的原因及排查方法

  1. 服务器配置：

    • 确保服务器正确设置了Transfer-Encoding: chunked或Content-Length头，以便客户端能够知道数据是分块传输的。

  2. 缓存问题：

    • 尝试在请求头中添加Cache-Control: no-cache，以避免缓存干扰实时数据接收。

  3. 跨域问题：

    • 如果请求跨域，确保服务器支持CORS，并正确设置了Access-Control-Allow-Origin等头。

  4. 网络问题：

    • 检查网络连接是否稳定，特别是在移动设备上。

  5. uni-app和plus环境：

    • 确保uni-app和HBuilderX（如果使用）更新到最新版本，以包含最新的修复和改进。
    • 检查manifest.json中的相关配置，确保没有禁用或限制网络请求。

  6. 数据格式：

    • 确保后端发送的数据格式与客户端期望的格式一致，例如文本、JSON、二进制等。

通过上述代码示例和排查方法，你应该能够定位并解决onprogress事件在安卓端无法实时监听流式数据的问题。如果问题依然存在，可能需要更深入地检查网络请求的详细日志或进行抓包分析。

回到顶部