手把手教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();

複製代碼

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章