目前市面上的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);
};

---