免費開源的iOS開發學習平臺

React Native基礎:7-網絡

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

日韩av 中文字幕 1_亚洲第一区在线_亚洲V日韩V精品v无码专区_色鬼久久亚洲AV综合