访问网络

很多移动应用都需要从远程地址中获取数据或资源。你可能需要给某个 REST API 发起 POST 请求以提交用户数据，又或者可能仅仅需要从某个服务器上获取一些静态内容——以下就是你会用到的东西。新手可以对照这个简短的视频教程加深理解。

使用 Fetch

React Native 提供了和 web 标准一致的Fetch API，用于满足开发者访问网络的需求。如果你之前使用过XMLHttpRequest(即俗称的 ajax)或是其他的网络 API，那么 Fetch 用起来将会相当容易上手。这篇文档只会列出 Fetch 的基本用法，并不会讲述太多细节，你可以使用你喜欢的搜索引擎去搜索fetch api关键字以了解更多信息。

发起请求

要从任意地址获取内容的话，只需简单地将网址作为参数传递给 fetch 方法即可（fetch 这个词本身也就是获取的意思）：

TypeScript

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

Fetch 还有可选的第二个参数，可以用来定制 HTTP 请求一些参数。你可以指定 header 参数，或是指定使用 POST 方法，又或是提交数据等等：

TypeScript

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

提交数据的格式关键取决于 headers 中的Content-Type。Content-Type有很多种，对应 body 的格式也有区别。到底应该采用什么样的Content-Type取决于服务器端，所以请和服务器端的开发人员沟通确定清楚。常用的'Content-Type'除了上面的'application/json'，还有传统的网页表单形式，示例如下：

TypeScript

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: 'key1=value1&key2=value2',
});

可以参考Fetch 请求文档来查看所有可用的参数。

注意：使用 Chrome 调试目前无法观测到 React Native 中的网络请求，你可以使用第三方的react-native-debugger来进行观测。

处理服务器的响应数据

上面的例子演示了如何发起请求。很多情况下，你还需要处理服务器回复的数据。

网络请求天然是一种异步操作。Fetch 方法会返回一个Promise，这种模式可以简化异步风格的代码（译注：同样的，如果你不了解 promise，建议使用搜索引擎补课）：

TypeScript

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 语法：

TypeScript

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);
  }
};

别忘了 catch 住fetch可能抛出的异常，否则出错时你可能看不到任何提示。

TypeScript

JavaScript

info

默认情况下，iOS 会强制执行 App Transport Security (ATS)，要求所有 HTTP 连接都使用 HTTPS。如果你需要从明文 URL（以http开头的 URL）获取数据，必须在 Info.plist 文件中通过 NSAppTransportSecurity 配置 ATS 例外。建议使用 NSExceptionDomains 只为特定域名添加例外，而不是全局禁用 ATS（NSAllowsArbitraryLoads），因为 Apple App Store 审核要求对禁用 ATS 提供合理理由。更多信息请参阅 Apple 关于防止不安全的网络连接的文档。

tip

在 Android 上，从 API Level 28 开始，默认也会阻止明文流量。可以通过在 app manifest 文件中设置android:usesCleartextTraffic来覆盖此行为。

使用其他的网络库

React Native 中已经内置了XMLHttpRequest API(也就是俗称的 ajax)。一些基于 XMLHttpRequest 封装的第三方库也可以使用，例如frisbee或是axios等，或者你也可以直接使用 XMLHttpRequest API。

TypeScript

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 的安全模型与网页不同，因为在原生应用中没有跨域的概念。

WebSocket 支持

React Native 还支持WebSocket，这种协议可以在单个 TCP 连接上提供全双工的通信信道。

TypeScript

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 和基于 cookie 的身份验证存在已知问题

目前，以下选项在 fetch 中无法正常工作：

• redirect:manual
• credentials:omit

• 在 Android 上重复使用相同名称的标头将导致仅存在最新的标头。您可以在此处找到一个临时解决方案：https://github.com/react/react-native/issues/18837#issuecomment-398779994。
• 基于 cookie 的身份验证目前不稳定。您可以在此处查看引发的一些问题：https://github.com/react/react-native/issues/23185
• 在 iOS 上，至少在通过 302 重定向时，如果存在 Set-Cookie 标头，则 cookie 不会正确设置。由于无法手动处理重定向，由过期会话引起的重定向可能会导致无限请求的死循环发生。

在 iOS 上配置 NSURLSession

对于一些应用程序，为在运行在 iOS 上的 React Native 应用程序中用于网络请求的底层NSURLSession提供自定义的NSURLSessionConfiguration可能是合适的。例如，可能需要为所有来自应用程序的网络请求设置自定义用户代理字符串，或者使用一个短暂的NSURLSessionConfiguration提供给NSURLSession。函数RCTSetCustomNSURLSessionConfigurationProvider允许进行这样的定制。记得在调用RCTSetCustomNSURLSessionConfigurationProvider的文件中添加以下导入：

Objective-C

#import <React/RCTHTTPRequestHandler.h>

RCTSetCustomNSURLSessionConfigurationProvider 应在应用程序生命周期的早期调用，以便在 React 需要时可以轻松访问。

对于使用 UIScene 生命周期的应用，请在启动 React Native 之前从 scene:willConnectToSession:options: 中调用：

Objective-C

- (void)scene:(UIScene *)scene
    willConnectToSession:(UISceneSession *)session
                 options:(UISceneConnectionOptions *)connectionOptions
{
  RCTSetCustomNSURLSessionConfigurationProvider(^NSURLSessionConfiguration *{
    NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration];
    // configure the session
    return configuration;
  });

  // set up React Native
}

对于未使用 UIScene 生命周期的应用，请在启动 React Native 之前从 application:didFinishLaunchingWithOptions: 中调用：

Objective-C

-(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];
}