手把手教React Native实战之44API学习-网络状态与数据交互

网络连接状态NetInfo：

获取网络状态是异步的，使用了js的Promise机制

Android平台的网络连接类型状态如下:

1.NONE 设备没有网络连接

2.BLUETOOTH 蓝牙数据连接

3.DUMMY 虚拟数据连接

4.ETHERNET 以太网数据连接

5.MOBILE 手机移动网络数据连接

6.MOBILE_DUN 拨号移动网络数据连接

7.MOBILE_HIPRI 高权限的移动网络数据连接

8.MOBILE_MMS 彩信移动网络数据连接

9.MOBILE_SUPL SUP网络数据连接

10.VPN 虚拟网络连接 ，最低支持Android API 21版本

11.WIFI 无线网络连接

12.WIMAX wimax网络连接

13.UNKNOWN 未知网络数据连接

根据文档说明:除此之外的其他一些网络连接状态已经被Android API隐藏了，但是我们可以在有需要的时候进行使用。

IOS平台的网络连接类型状态如下:

1.none 设备没有联网

2.wifi 设备联网并且是连接的wifi网络，或者当前是iOS模拟器

3.cell 设备联网是通过连接Edge,3G,WiMax或者LET网络

4.unknown 该检测发生异常错误或者网络状态无从知道

NetInfo有两个监听：

1.网络状态改变的监听 回调当前网络的状态

2.网络是否连接的监听 回调true或false

Android独有的特色：

1.NetInfo.isConnectionExpensive判断当前网络是否计费

2.AndroidManifest.xml文件中添加如下权限字段：(需视频演示)

数据交互（网络请求与响应）

抓包工具：httpwatch 下载地址：https://yunpan.cn/cRpfdwiYvu2jR 访问密码 f018

IE中打开httpwatch的方法： shift+F2 Record Stop clear

通过http或https协议与网络服务器交互，react native集成了node-fetch包以支持开发者的这种需求

网络协议：http https

网络请求方法：get post 等 默认是get

1.GET使用URL或Cookie传参。而POST将数据放在BODY中。

2.GET的URL会有长度上的限制，则POST的数据则可以非常大。

3.POST比GET安全，因为数据在地址栏上不可见。

百度一下：不再以讹传讹，GET和POST的真正区别

建议：
1.get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；

2.在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

准备需要传输的消息头：（标准消息头 自定义消息头）

React Native使用http协议框架支持Accept-Encoding: gzip, deflate格式编码，开发者不需要对此进行设置

自定义消息头可以在一些约定好的http消息头中填入身份认证信息

RN中的网络访问api：Fetch(推荐) XMLHttpRequest

fetch是一个更好的网络API，它由标准委员会提出，并已经在Chrome中实现。它在React Native中也默认可以使用。fetch的返回值是一个Promise对象，你可以用两种办法来使用它：1、使用then和catch指定回调函数 2、使用ES7的async/await语法来发起一个异步调用

//如果你的服务器无法识别上面POST的数据格式，那么可以尝试传统的form格式
map.body = ‘username=13667377378&password=dfy889&act=signin’;

map.follow = 10;//设置请求允许的最大重定向次数，0为不允许重定向map.timeout = 8000;//设置超时时间，0为没有超时时间，这个值在重定向时会被重置map.size = 0;//设置请求回应中的消息体最大允许长度，0为没有限制

XMLHttpRequest的实现几乎跟Web一样，唯一的区别就是(安全机制)rn中的XMLHttpRequest不存在跨域的限制，而是作为全局api实现的，你可以访问任何网站。但是，XMLHttpRequest基于iOS网络的
let request=new XMLHttpRequest();
request.onreadystatechange= (e)=>{
if(request.readyState!==4){
return ;
}
if(request.status===200){
alert(request.resonsesText);
}else{
alert(‘出错啦’);
}

};request.open('GET','http://www.reactnative.vip/');request.send();

复制代码