React Native Networking API

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