ReactNative 网络请求服务方式

ReactNative 网络请求服务方式有很多种，Android网络访问跟IOS有所稍微不同

支持的网络请求有：

1、Fetch

2、传统做法：XMLHttpRequest

3、Axios

4、Frisbee

注意，RN不支持jQuery，因为jQuery中还使用了很多浏览器中才有的东西，而RN没有。。。

 

1、使用Fetch(跟jQuery中的ajax用法几乎一致)：

fetch(‘URL’ , {

method:’POST’ ,

headers: {

‘Content-Type’:‘application/json’ ,

(当然也可以是传统的’application/x-www-form-urlencoded’)

} ,

body : JSON.stringify({

Key1:val1,

Key2:val2

})   //假如用传统的headers传递参数这么来：body:’key=val1&key2=val2’ ,

}).then((response)=>{

//请求成功，处理返回数据

}).catch((error)=>{

//请求失败

});

 

2、传统的XMLHttpRequest使用方法(三步走原则):

1)、构建xhr对象

var xhr = new XMLHttpRequest();

2)、请求完成后的回调函数

xhr.onreadystatechange = (e)=>{

If(xhr.readyState===4 && xhr.status===200){

//数据请求成功处理数据

console.log(xhr.responseText);

}else{

//数据请求失败

}

}

3)、打开一个链接并发送请求

GET方式：

xhr.open(‘GET’ , ‘URL?key1=val1&key2=val2’ , true);

Xhr.send(); //GET方式发送的请求参数拼接在URL后边

 

POST方式：

xhr.open(‘POST’ , ‘URL’ , true);

xhr.setRequestHeader(‘Content-Type’ , ‘application/x-www-form-urlencoded’);

xhr.send(‘key1=val1&key2=val2’); //POST方式的请求参数放在send中，前提设置请求头

假如用POST方式发送请求参数的简易写法：

var data = {key1:val1 , key2:val2};

Xhr.send(postDataFormat(data));

 

前两种已经差不多满足了所有短连接(客户端每次连接上服务器请求完数据立马断开)网络请求的要求，下面还有一种长连接(客户端跟服务器之间时时刻刻都处于连接状态)的网络请求方式，WebSocket 适用于直播平台，每时每刻都跟服务器之间建立连接从而可以源源不断地获取服务器发送的数据。(ajax就相当于用瓢取水中间有停顿间隙，而WebSocket就相当于水桶跟水源之间有一根水管，源源不断)  注意：短连接对服务器的负荷特别小，长连接对服务器的负荷特别大，但是各有利弊，直播平台的时时刻刻更新数据刷新界面的需求短连接是根本满足不了的。。。

 

WebSocket使用方法：

var ws = new WebSocket(‘URL’);

 

ws.onopen = ()=>{

ws.send(‘消息’);

};

 

ws.onmessage = (e)=>{

//接收到服务器的消息放在参数e中

console.log(e.data);

};

 

ws.onerror = (e)=>{

//发生了一个错误

console.log(e.message);

};

 

ws.onclose = (e)=>{

//链接关闭的时候执行的方法

console.log(e);

};