跳至主内容
版本：0.81

网络通信

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

许多移动应用需要从远程 URL 加载资源。您可能需要向 REST API 发起 POST 请求，或是从其他服务器获取静态内容片段。

使用 Fetch​

React Native 提供了 Fetch API 来满足网络通信需求。如果您曾使用过 XMLHttpRequest 或其他网络 API，会对 Fetch 感到熟悉。更多信息可参考 MDN 的 使用 Fetch 指南。

发起请求​

要从任意 URL 获取内容，只需将 URL 传递给 fetch 方法：

tsx
fetch('https://mywebsite.com/mydata.json');

Fetch 还支持可选的第二个参数，用于自定义 HTTP 请求。您可能需要添加额外请求头或发起 POST 请求：

tsx
fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

完整属性列表请查阅 Fetch Request 文档。

处理响应​

上述示例展示了如何发起请求。多数情况下，您还需要对响应结果进行处理。

网络通信本质上是异步操作。Fetch 方法会返回一个 Promise，让编写异步代码变得简单直接：

tsx
const getMoviesFromApi = () => {
  return fetch('https://reactnative.dev/movies.json')
    .then(response => response.json())
    .then(json => {
      return json.movies;
    })
    .catch(error => {
      console.error(error);
    });
};

在 React Native 应用中也可使用 async / await 语法：

tsx
const getMoviesFromApiAsync = async () => {
  try {
    const response = await fetch(
      'https://reactnative.dev/movies.json',
    );
    const json = await response.json();
    return json.movies;
  } catch (error) {
    console.error(error);
  }
};

请务必捕获 fetch 可能抛出的错误，否则这些错误会被静默忽略。

信息

默认情况下，iOS 9.0 及以上版本强制启用应用传输安全 (ATS) 策略。ATS 要求所有 HTTP 连接必须使用 HTTPS。如需从明文 URL（以 http 开头的地址）获取数据，您需要先添加 ATS 例外。如果提前知道需要访问的域名，建议仅针对这些域名添加例外更为安全；若域名需运行时才能确定，可以完全禁用 ATS。请注意自 2017 年 1 月起，苹果应用商店审核要求对禁用 ATS 提供合理说明。详见 苹果官方文档。

技巧

在 Android 平台上，从 API 28 级开始默认同样会阻止明文流量。可通过在应用清单文件中设置 android:usesCleartextTraffic 来覆盖此行为。

使用其他网络库​

XMLHttpRequest API 已内置在 React Native 中。这意味着您可以使用依赖它的第三方库（如 frisbee 或 axios），也可以直接使用 XMLHttpRequest API。

tsx
const request = new XMLHttpRequest();
request.onreadystatechange = e => {
  if (request.readyState !== 4) {
    return;
  }

  if (request.status === 200) {
    console.log('success', request.responseText);
  } else {
    console.warn('error');
  }
};

request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();
注意

XMLHttpRequest 的安全模型与 Web 环境不同，因为原生应用中没有 CORS 概念。

WebSocket 支持​

React Native 同样支持 WebSockets，该协议可在单个 TCP 连接上提供全双工通信通道。

tsx
const ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  // connection opened
  ws.send('something'); // send a message
};

ws.onmessage = e => {
  // a message was received
  console.log(e.data);
};

ws.onerror = e => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = e => {
  // connection closed
  console.log(e.code, e.reason);
};

以下选项目前在 fetch 中无法使用：

  • redirect:manual

  • credentials:omit

在 iOS 上配置 NSURLSession​

某些应用场景可能需要为运行于 iOS 的 React Native 应用底层用于网络请求的 NSURLSession 提供自定义的 NSURLSessionConfiguration。例如：统一设置所有网络请求的自定义 User-Agent 字符串，或为 NSURLSession 提供临时的 NSURLSessionConfiguration。通过 RCTSetCustomNSURLSessionConfigurationProvider 函数可实现此类定制。请注意在调用 RCTSetCustomNSURLSessionConfigurationProvider 函数的文件中添加以下导入语句：

objectivec
#import <React/RCTHTTPRequestHandler.h>

RCTSetCustomNSURLSessionConfigurationProvider 应在应用生命周期早期调用，确保 React 需要时即可使用，例如：

objectivec
-(void)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

  // set RCTSetCustomNSURLSessionConfigurationProvider
  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
     NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
     // configure the session
     return configuration;
  });

  // set up React
  _bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
}