Networking (網絡)

大部分移動應用程序都需要從一個遠程網址上加載數據資源,那麽我們需要向一個接口發送一個請求,或者只需要從另外一個服務器獲取一個靜態內容.

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