码迷,mamicode.com
首页 > Windows程序 > 详细

React Native Networking API

时间:2017-05-26 09:24:36      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:other   传输   something   需要   .json   mis   网络请求   安全   信息   

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

标签:other   传输   something   需要   .json   mis   网络请求   安全   信息   

原文地址:http://www.cnblogs.com/fengnovo/p/6906852.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!