设为首页收藏本站

react native【免费】VIP视频教程 rn开发者交流论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1296|回复: 13

[课堂笔记] 44、手把手教React Native实战之API学习-网络状态与数据交互

[复制链接]

401

主题

762

帖子

6895

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6895
发表于 2016-6-27 16:10:27 | 显示全部楼层 |阅读模式
#44、手把手教React Native实战之API学习-网络状态与数据交互

加作者微信公众号(dongfangyao888)或扫描下面二维码
推送高清视频教程+语音解说+课堂笔记和源码


##先来看看Android原生的:
(安装最新版的AS)
地址(翻墙):https://sites.google.com/a/andro ... tudio/canary/latest

Latest Android Studio Canary Build: 2.2 Preview 4

Windows(用迅雷下载): https://dl.google.com/dl/android ... 3001415-windows.zip (436.8 MB)
Mac: https://dl.google.com/dl/android ... 145.3001415-mac.zip  (436.9 MB)
Linux:  https://dl.google.com/dl/android ... 5.3001415-linux.zip  (436.4 MB)

Android_SDK也得更新一下

这里有一个坑:用最新版的as去打开之前的项目,报错:Error:Could not find com.android.tools.build:gradle-core:2.2.0-alpha2

解决办法:复制旧版本的as中的2.2.0-alpha2到新版本as(有10几处地方),打开后会提示升级,升级到最新版本的alpha4

启用gradle_daemon加速器:https://docs.gradle.org/2.9/userguide/gradle_daemon.html

##网络连接状态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文件中添加如下权限字段:(需视频演示)

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

##数据交互(网络请求与响应)

抓包工具: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网络的
  1. let request=new XMLHttpRequest();
  2.     request.onreadystatechange= (e)=>{
  3.       if(request.readyState!==4){
  4.         return ;
  5.       }
  6.       if(request.status===200){
  7.         alert(request.resonsesText);
  8.       }else{
  9.         alert('出错啦');
  10.       }

  11.     };
  12.     request.open('GET','http://www.reactnative.vip/');
  13.     request.send();
复制代码








react native vip论坛免费发布【手把手教react native实战开发】视频教程,立志于打造全互联网最全面最详细最易懂的React Native
开发视频教程,Facebook已经在多项产品中使用了React Native,并且将持续地投入建设,让我们引领react native开发的潮流!
回复

使用道具 举报

0

主题

69

帖子

178

积分

注册会员

Rank: 2

积分
178
发表于 2016-7-15 15:21:10 | 显示全部楼层
学习了。。。。。。。
回复

使用道具 举报

0

主题

1

帖子

6

积分

新手上路

Rank: 1

积分
6
发表于 2016-9-9 22:58:41 | 显示全部楼层
请问一下,fetch 如何ignore self signed certificate的 https请求.
回复 支持 反对

使用道具 举报

0

主题

106

帖子

234

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
234
发表于 2016-9-19 12:37:57 | 显示全部楼层
好东西,顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
回复 支持 反对

使用道具 举报

0

主题

106

帖子

234

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
234
发表于 2016-9-19 12:38:42 | 显示全部楼层
好东西,顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
回复 支持 反对

使用道具 举报

0

主题

106

帖子

234

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
234
发表于 2016-9-19 12:39:03 | 显示全部楼层
好东西,顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
回复 支持 反对

使用道具 举报

0

主题

106

帖子

234

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
234
发表于 2016-9-19 12:39:34 | 显示全部楼层
好东西,顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
回复 支持 反对

使用道具 举报

0

主题

106

帖子

234

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
234
发表于 2016-9-19 12:40:02 | 显示全部楼层
好东西,顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
回复 支持 反对

使用道具 举报

0

主题

106

帖子

234

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
234
发表于 2016-9-19 12:41:37 | 显示全部楼层
好东西,顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
回复 支持 反对

使用道具 举报

0

主题

54

帖子

128

积分

注册会员

Rank: 2

积分
128
发表于 2016-10-4 19:13:45 | 显示全部楼层
好好学习,天天向上!!!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|ReactNative Inc.    

GMT+8, 2018-7-19 19:36 , Processed in 0.158242 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表