React Native中Axios onDownloadProgress的isTrusted为false如何解决

问题根因 #

• isTrusted是事件对象的只读内置属性，没有任何JS层方法可以手动修改：只有运行时原生派发的真实事件该字段才为true，JS层手动构造的事件对象该字段恒为false，完全不需要在修改这个值上浪费时间，它不影响进度计算逻辑。
• React Native 0.62.2自带的XMLHttpRequest实现本身有缺陷：这个版本的RN原生网络层只实现了上传场景的进度回调，下载场景不会上报真实的已下载体积、总文件体积，只会统一返回-1，这是你拿到异常进度对象的核心原因，和服务端是否返回content-length无关。纯浏览器/Node.js环境的XHR实现是完整的，所以相同代码在非RN环境可以正常运行。
• 你现在看到onDownloadProgress被触发，本质是axios内部做的兼容兜底逻辑，派发的是手动合成的假事件对象，自然会出现loaded: -1、total: -1、isTrusted: false的结果。

解决方法 #

方案1：替换axios默认适配器，改造成本最低 #

不需要改动现有业务请求代码，只需要全局替换axios的网络适配器，跳过RN自带的残缺XHR实现即可。

1. 安装支持React Native环境的axios适配器，这类适配器基于RN原生网络能力封装，完整支持下载进度上报。
2. 在项目的axios全局配置文件中指定自定义适配器，示例代码：

import axios from 'axios';
import rnAdapter from 'axios-react-native-adapter';

// 全局替换默认适配器
axios.defaults.adapter = rnAdapter;

配置完成后你原来写的GET请求逻辑不需要任何修改，onDownloadProgress回调就能拿到真实的进度数据：

onDownloadProgress: (progressEvent) => {
    if (progressEvent.lengthComputable) {
        // 计算百分比进度
        const downloadPercent = Math.floor((progressEvent.loaded / progressEvent.total) * 100);
        // 直接把downloadPercent赋值给进度条组件即可
    }
}

注意：如果服务端开启了gzip响应压缩，content-length返回的是压缩后文件大小，计算出的进度可能存在小幅偏差，属于正常现象。

方案2：升级React Native版本 #

RN官方在0.64及以上版本修复了XHR实现缺失下载进度回调的问题，升级后不需要引入任何额外依赖，原有axios代码可以直接拿到正确的下载进度。但0.62跨版本升级需要处理大量原生依赖兼容问题，改造成本较高，仅适合本来就有版本迭代计划的项目选择。

方案3：大文件下载场景用原生网络库单独实现 #

如果是下载大文件需要展示进度，也可以不对全局axios做改动，针对这类需求单独使用react-native-blob-util这类直接调用原生网络API的库实现，进度上报精度更高，还支持断点续传、文件本地存储等能力，普通接口请求继续沿用原有axios逻辑即可。

内容的提问来源于stack exchange，提问作者Vishwajeet Gade