免費開源的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);
                                                };
                                                

                                                欧美超级精品一级A片|欧美一级黄色视频|国产精品自在在线午夜免费|4444亚洲人成无码网在线观看|亚洲ⅴa曰本va欧美va视频