目前市面上的APP已经离不开网络了，很少有不涉及网络请求的APP，甚至一些单机游戏都要通过网络登陆、分享以及在游戏内购买道具。React Native提供了与WEB标准一致的Fetch API，用于满足开发者网络开发的需求。Fetch目前已经得到了广泛的应用，其被认为是一种替代XMLHttpRequest(XHR)的技术。Fetch提供了一个fetch()方法，它被定义在BOM的window对象中，可以用它来发起对远程资源的请求，同时该方法返回的是一个Promise对象，能够对请求的返回结果进行解析处理。

发送网络请求

Fetch API中最简单的用法就是把url作为fetch()函数的参数，如下所示。

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

另外，还可以通过Request构造器函数创建一个新的请求对象。 其中，第一个参数是请求的URL，第二个参数是一个选项对象，用于配置请求，其中可以包含请求方式（GET/POST）、请求头、请求体等构成要素。

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

处理网络响应

使用fetch()函数发送网络请求(Request)后，会得到服务器反馈的响应(Response)。一般来说，通过GET方式获取到服务端数据后，通常需要将其内容在界面上展示出来。而通过POST方式提交数据之后，通常需要根据服务端返回的结果来更新界面。因此，不管哪种方式，我们都要对获取到的服务端返回数据进行加以处理。fetch()函数会返回一个Promise对象，该对象拥有then和catch方法。

为了演示Fetch的用法，我们首先创建一个名为NetworkDemo的工程。在index.ios.js文件中，实现一个getABook()函数，在该函数中向一个网络地址发送请求，然后对得到的响应数据进行解析。response对象有一个json()方法，该方法可以得到Promise对象，所以我们可以在then()方法中将转换的对象打印出来。查看iOS模拟器打印的日志数据，可以通过【Debug】-> 【Open System Log】打开查看。

getABook() {
    fetch('https://api.douban.com/v2/book/1220562')
    .then((response) => {
      response.json()
      .then((json) => {
        console.log(json);
      });
    })
    .catch((error) => {
      console.error(error);
    });
  }
   componentDidMount() {
    this.getABook();
  }
}

在index.ios.js文件中，补充如下代码后，在终端执行react-native run-ios命令运行程序。

import React, { Component } from 'react';
import {
  AppRegistry,
  View
} from 'react-native';

export default class NetworkDemo extends Component {
  render() {
    return (
      <View>
      </View>
    );
  }

 
AppRegistry.registerComponent('NetworkDemo', () => NetworkDemo);

iOS模拟器运行后，在system.log中，可以查看获取到的服务器响应数据。

WebSocket

React Native还可以支持WebSocket，WebSocket对象可以管理与服务端的链接，可以用来接收和发送数据。对于WebSocket的简单使用可以参考下方的示例代码。

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

ws.onopen = () => {
  // 打开一个连接，发送一条消息
  ws.send('something'); 
};

ws.onmessage = (e) => {
  // 接收到了一个消息
  console.log(e.data);
};

ws.onerror = (e) => {
  // 发生了一个错误
  console.log(e.message);
};

ws.onclose = (e) => {
  // 连接被关闭了
  console.log(e.code, e.reason);
};

---