React Native Networking API

標籤：other   傳輸   something   需要   .json   mis   網路請求   安全   資訊   

Networking (網路) 

大部分行動裝置 App程式都需要從一個遠程網址上載入資料資源,那麼我們需要向一個介面發送一個請求,或者只需要從另外一個伺服器擷取一個靜態內容.

 

1.Using Fetch (使用Fetch) 

React Native為我們提供了網路請求所需要的Fetch API .

Making requests (發起請求) 

想從任意網址擷取內容？只需要通過網址擷取即可:

fetch(‘https://mywebsite.com/mydata.json‘)

Fetch 的選擇性參數,允許你定製HTTP請求,可以額外指定 headers 或者使用 POST/GET 的方式進行請求:

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

 

2.Handling the response (處理響應) 

在上面的例子中我們已經學習了如何發起一個請求,那麼請求發起以後,我們通常可以獲得到請求的響應情況.

這裡的網路請求是一個非同步作業,它將會返回一個響應Promise(承諾/狀態),下面是非同步請求的程式碼範例:

function getMoviesFromApiAsync() {  return fetch(‘https://facebook.github.io/react-native/movies.json‘)      .then((response)=>response.json())      .then((responseJson)=>{        return responseJson.movies;      })      .catch((error)=>{        console.error(error);      });}

你可以使用 ES2017 async/ await 的文法來書寫:

async function getMoviesFromApi() {      try {        let response = await fetch(‘https://facebook.github.io/react-native/movies.json‘);        let responseJson = await response.json();        return responseJson.movies;      } catch(error) {        console.error(error);      }}

不要忘記捕獲一下錯誤,如果沒有捕獲,系統將為自動丟棄.

預設情況下, iOS 將阻止任何不使用SSL加密的請求,如果你需要使用不加密的 URL ,那麼需要添加一個傳輸安全的例外.
如果你知道 URL 訪問的域,那麼添加例外會更安全. 你可以禁止ATS。

 

3.Using Other Networking Libraries (使用其他的網路程式庫) 

React Native內建了XMLHttpRequest API. 這樣你可以使用第三方的庫來操作,比如frisbee或者axios,或者你可以直接使用 XMLHttpRequest API 進行請求.

var 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 的安全模型和 Web 上不同,因為原生APP沒有CORS這個概念.

 

4.WebSocket Support (WebSocket支援) 

React Native支援WebSockets,在一個單TCP串連提供雙向通訊通道的協議.

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

 

React Native Networking API