React Native中如何实现iOS类似的网络字节指标追踪？

在iOS 13.0及以上版本中，NSURLSessionTaskMetrics提供以下属性用于网络请求字节统计：

@available(iOS 13.0, *)
open var countOfResponseBodyBytesReceived: Int64 { get }

@available(iOS 13.0, *)
open var countOfResponseBodyBytesAfterDecoding: Int64 { get }

其中：

• countOfResponseBodyBytesReceived：从服务器接收的原始总字节数（含压缩、编码格式）
• countOfResponseBodyBytesAfterDecoding：响应体经过解码/解压后的实际数据大小

针对React Native项目，使用Axios实现对应功能的方案如下：

1. 追踪接收的总字节数（对应countOfResponseBodyBytesReceived） #

利用Axios的onDownloadProgress回调可实时获取已接收的字节数，请求完成时的loaded值即为总接收字节数，该值对应服务器传输的原始字节（含gzip等压缩格式）。

代码示例：全局拦截器统一处理 #

import axios from 'axios';

const axiosInstance = axios.create();

// 请求拦截器：统一注入下载进度监听
axiosInstance.interceptors.request.use(config => {
  config.onDownloadProgress = progressEvent => {
    // 请求完成时，loaded即为总接收字节数
    if (progressEvent.loaded) {
      console.log(`总接收字节数: ${progressEvent.loaded}`);
      // 可将该值存入全局状态或上报至统计系统
    }
  };
  return config;
});

// 使用实例发起请求
axiosInstance.get('https://example.com/api/data')
  .then(response => { /* 处理响应 */ })
  .catch(error => { /* 处理错误 */ });

2. 计算解码后的响应体大小（对应countOfResponseBodyBytesAfterDecoding） #

Axios会自动处理响应的解码逻辑（如gzip解压、JSON解析），response.data即为解码后的数据。根据数据类型不同，计算方式如下：

代码示例：响应拦截器中统一计算 #

axiosInstance.interceptors.response.use(response => {
  let decodedSize = 0;
  const data = response.data;

  if (typeof data === 'string') {
    // 字符串类型：转UTF-8字节数组计算长度
    decodedSize = new TextEncoder().encode(data).length;
  } else if (typeof data === 'object' && data !== null) {
    // JSON对象：先序列化为字符串再计算字节数
    const jsonStr = JSON.stringify(data);
    decodedSize = new TextEncoder().encode(jsonStr).length;
  } else if (data instanceof Blob) {
    // Blob类型：直接使用原生size属性
    decodedSize = data.size;
  }

  console.log(`解码后响应体大小: ${decodedSize}`);
  // 将计算结果挂载到response对象，供后续业务逻辑使用
  response.decodedBodySize = decodedSize;
  return response;
});

可选优化：使用Axios扩展库 #

如果需要更完善的指标追踪能力，可尝试axios-metrics这类Axios扩展库，它封装了请求时长、字节统计等常用指标，无需手动实现基础逻辑。

内容的提问来源于stack exchange，提问作者Siddhant Shelake