React Native 网络请求方法


声明:本文转载自https://my.oschina.net/ososchina/blog/1600054,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

前言

React Native逻辑部分使用javascript引擎作为支撑,因此,原则上我们可以使用ServerSent、Ajax、WebSocket请求以及ES6。

Fetch网络请求

Fetch是为了改善Ajax处理逻辑而推出新的请求api,具体使用请参考(Using Fetch Api

要从任意地址获取内容的话,只需简单地将网址作为参数传递给fetch方法即可(fetch这个词本身也就是【获取】的意思):

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

Fetch还有可选的第二个参数,可以用来定制HTTP请求一些参数。你可以指定header参数,或是指定使用POST方法,又或是提交数据等等:

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

此外,下载图片也是可以的

var myImage = document.querySelector('img');  fetch('flowers.jpg').then(function(response) {   return response.blob(); }).then(function(myBlob) {   var objectURL = URL.createObjectURL(myBlob);   myImage.src = objectURL; });

提交数据的格式关键取决于headers中的Content-TypeContent-Type有很多种,对应body的格式也有区别。到底应该采用什么样的Content-Type取决于服务器端,所以请和服务器端的开发人员沟通确定清楚。常用的'Content-Type'除了上面的'application/json',还有传统的网页表单形式,示例如下:

fetch('https://mywebsite.com/endpoint/', {   method: 'POST',   headers: {     'Content-Type': 'application/x-www-form-urlencoded',   },   body: 'key1=value1&key2=value2' }) 

可以参考Fetch请求文档来查看所有可用的参数。

处理服务器的响应数据

上面的例子演示了如何发起请求。很多情况下,你还需要处理服务器回复的数据。

网络请求天然是一种异步操作(译注:同样的还有asyncstorage,请不要再问怎样把异步变成同步!无论在语法层面怎么折腾,它们的异步本质是无法变更的。异步的意思是你应该趁这个时间去做点别的事情,比如显示loading,而不是让界面卡住傻等)。Fetch 方法会返回一个Promise,这种模式可以简化异步风格的代码(译注:同样的,如果你不了解promise,建议使用搜索引擎补课):

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

你也可以在React Native应用中使用ES7标准中的async/await 语法:

  // 注意这个方法前面有async关键字   async getMoviesFromApi() {     try {       // 注意这里的await语句,其所在的函数必须有async关键字声明       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);     }   } 

别忘了catch住fetch可能抛出的异常,否则出错时你可能看不到任何提示。

Ajax网络请求

React Native中已经内置了XMLHttpRequest API(也就是俗称的ajax)。一些基于XMLHttpRequest封装的第三方库也可以使用,例如frisbee或是axios等。但注意不能使用jQuery,因为jQuery中还使用了很多浏览器中才有而RN中没有的东西(所以也不是所有web中的ajax库都可以直接使用)。

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

需要注意的是,安全机制与网页环境有所不同:在应用中你可以访问任何网站,没有跨域的限制。

WebSocket网络交互

React Native还支持WebSocket,这种协议可以在单个TCP连接上提供全双工的通信信道。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); };

axios框架

axios基于ajax,和fetch功能类似,主要解决代码逻辑结构和深层嵌套问题,她还有个优点是比fetch兼容性强。使用时需要引入axios.js或者axios.min.js

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

发送get请求

// Make a request for a user with a given ID axios.get('/user?ID=12345')   .then(function (response) {     console.log(response);   })   .catch(function (error) {     console.log(error);   });  // Optionally the request above could also be done as axios.get('/user', {     params: {       ID: 12345     }   })   .then(function (response) {     console.log(response);   })   .catch(function (error) {     console.log(error);   });

发送post请求

axios.post('/user', {     firstName: 'Fred',     lastName: 'Flintstone'   })   .then(function (response) {     console.log(response);   })   .catch(function (error) {     console.log(error);   });

并发请求

function getUserAccount() {   return axios.get('/user/12345'); }  function getUserPermissions() {   return axios.get('/user/12345/permissions'); }  axios.all([getUserAccount(), getUserPermissions()])   .then(axios.spread(function (acct, perms) {     // Both requests are now complete   }));

 

扩展模块

React Native具有很高可扩展性,本身类似一个适配器,对于自己特殊的需求,可以通过扩展模块,即插即用。

在Android中我们需要实现ReactContextBaseJavaModule规范,我们可以使用的Android网络框架很多,如okhttp,xutils,httpclient等;在iOS平台,需要实现RCTBridgeModule协议,可以使用系统网络框架NSURLSession ,也可以使用AFNetwork 3.0以及其衍生框架。

这里具体实现我们就不在赘述,在后期的博客中加以说明。

结束语

本篇文章写于2017年12月31日23点11分,是本年度的最后一篇文章,此刻,祝福大家“新年快乐——Happy New Year ”。

本文发表于2018年01月01日 10:39
(c)注:本文转载自https://my.oschina.net/ososchina/blog/1600054,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 2601 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1