React Native网络请求终极指南：原生性能优化与实战技巧

在 React Native 中调用原生网络请求，可以通过内置 API、第三方库或自定义原生模块实现。

一、使用 React Native 内置 API

1. Fetch API

React Native 内置了符合 Web 标准的 Fetch API，支持 GET/POST 请求及异步处理，是官方推荐的基础方案。

• 基本用法：

  // GET 请求
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
  
  // POST 请求（JSON 格式）
  fetch('https://api.example.com/endpoint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ key: 'value' }),
  });
  

• 流式文本支持：通过 response.text() 处理大文本或流式数据 。

2. XMLHttpRequest

适用于需要更底层控制的场景（如进度监控），但语法较复杂：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

• 优势：支持二进制数据（如 ArrayBuffer）和上传进度监控 。

---

二、集成第三方库

1. Axios

提供更简洁的 API 和拦截器功能，需额外安装：

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

// 全局配置示例
axios.defaults.baseURL = 'https://api.example.com';
axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
});

• 适用场景：复杂请求逻辑（如统一错误处理、请求重试）。

2. react-native-fetch-api

专为 React Native 优化的 Fetch 替代库，直接调用原生 Networking API，支持文本流式处理：

import { fetch } from 'react-native-fetch-api';

// 流式读取响应
fetch('https://stream.example.com')
  .then(response => {
    const reader = response.body.getReader();
    reader.read().then(({ value }) => console.log(value));
  });

• 性能优势：绕过 XMLHttpRequest，减少桥接开销 。

---

三、自定义原生模块（深度集成）

当需要复用原生网络库（如 OkHttp/NSURLSession）或处理加密通信时，可通过以下步骤实现：

1. Android 原生模块

// MyNetModule.java
public class MyNetModule extends ReactContextBaseJavaModule {
  public MyNetModule(ReactApplicationContext context) { super(context); }

  @Override
  public String getName() { return "MyNetModule"; }

  @ReactMethod
  public void nativeGet(String url, Promise promise) {
    OkHttpClient client = new OkHttpClient();
    Request request = new Request.Builder().url(url).build();
    client.newCall(request).enqueue(new Callback() {
      @Override
      public void onResponse(Call call, Response response) {
        promise.resolve(response.body().string());
      }
      // 错误处理省略
    });
  }
}

// 注册到 Package
public class MyPackage implements ReactPackage {
  @Override
  public List<NativeModule> createNativeModules(...) {
    return Arrays.asList(new MyNetModule(reactContext));
  }
}

JavaScript 调用：

import { NativeModules } from 'react-native';
NativeModules.MyNetModule.nativeGet('https://api.example.com/data')
  .then(data => console.log(data));

2. iOS 原生模块

// MyNetModule.m
RCT_EXPORT_METHOD(nativeGet:(NSString *)url resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
  NSURLSession *session = [NSURLSession sharedSession];
  [[session dataTaskWithURL:[NSURL URLWithString:url] completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
    if (error) { reject(@"error", @"Request failed", error); }
    else { resolve([[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding]); }
  }] resume];
}

---

四、安全与配置

1. HTTPS 强制要求：

   • iOS：需在 Info.plist 中添加 ATS 例外（仅限开发阶段）。
   • Android 9+：在 AndroidManifest.xml 中设置 android:usesCleartextTraffic="true" 允许 HTTP 。

2. 证书绑定：在原生层实现 SSL Pinning，增强安全性 。

---

五、性能优化建议

方法	适用场景	优势	缺点
Fetch API	简单请求、快速原型开发	内置、无需额外依赖	功能较基础
Axios	复杂逻辑、统一配置	拦截器、自动 JSON 转换	增加包体积
原生模块	高性能需求、复用现有原生代码	极致性能、完全控制	开发成本高、维护复杂
react-native-fetch-api	流式文本处理	原生 Networking API 集成	社区资源较少

---

实践步骤推荐

1. 优先使用 Fetch/Axios：满足 90% 的网络请求需求。
2. 按需引入原生模块：仅在需要复用原生代码或处理特殊协议（如 WebSocket 加密）时使用。
3. 监控与调试：通过 Flipper 或 Reactotron 分析网络性能，优化请求频率与数据量 。