前几篇文章写了关于React-Native中自己遇到的this的问题和组件嵌套的问题做了总结。今天要写的是关于React-Native中的网络请求的实现。

1.get的请求方式的实现

//g et请求

static get(url, callback) {

fetch(url)

. then ((response) => response.text()) . then ((responseText) => {

callback(JSON.parse(responseText));

}) . done () ;

}

get请求很是简单基本就是这样，再不多说了。

2.Post请求的实现

post请求我在这里写了两种形式，一种是Content-Type为application/json的形式，另一种是Content-Type为application/x-www-form-urlencoded。

2.1 application/json的形式

static postJson (url, data, callback) { var fetchOptions = { method : 'POST' , headers : { 'Accept' : 'application/json' , // json形式 'Content-Type' : 'application/json' }, body : JSON.stringify(data)

};

fetch(url, fetchOptions)

. then ((response) => response.text()) . then ((responseText) => {

callback(JSON.parse(responseText));

}) . done () ;

}

2.2 application/x-www-form-urlencoded的形式

static postFrom(url, data, callback) { var fetchOptions = { method : 'POST' , headers : { 'Accept' : 'application/json' , // 表单 'Content-Type' : 'application/x-www-form-urlencoded' }, body : 'data=' +data+ '' };

fetch(url, fetchOptions)

. then ((response) => response.text()) . then ((responseText) => {

callback(JSON.parse(responseText));

}) . done () ;

}

3 NetUtil的实现

/**

* NetUitl 网络请求的实现

* @author lidong

* @date 2016-03-17

* https://github.com/facebook/react-native

*/ 'use strict' ; import React, {

Component,

} from 'react-native' ; class NetUitl extends React . Component { //post请求 /**

*url :请求地址

*data:参数

*callback:回调函数

*/ static postFrom(url, data, callback) { var fetchOptions = {

method: 'POST' ,

headers: { 'Accept' : 'application/json' , 'Content-Type' : 'application/x-www-form-urlencoded' },

body: 'data=' +data+ '' //这里我参数只有一个data,大家可以还有更多的参数 };

fetch(url, fetchOptions)

.then((response) => response.text())

.then((responseText) => {

callback(JSON.parse(responseText));

}).done();

} /**

*url :请求地址

*data:参数(Json对象)

*callback:回调函数

*/ static postJson (url, data, callback) { var fetchOptions = {

method: 'POST' ,

headers: { 'Accept' : 'application/json' , //json形式 'Content-Type' : 'application/json' },

body: JSON.stringify(data)

};

fetch(url, fetchOptions)

.then((response) => response.text())

.then((responseText) => {

callback(JSON.parse(responseText));

}).done();

} //get请求 /**

*url :请求地址

*callback:回调函数

*/ static get(url, callback) {

fetch(url)

.then((response) => response.text())

.then((responseText) => {

callback(JSON.parse(responseText));

}).done();

}

}

module.exports = NetUitl;

4. 调用方法：

4.1 get的调用方法：

NetUtil. get ( "http://v.juhe.cn/weather/index?format=" +format+ "&key=" +key+ "&cityname=" +cityname, function (ret) { //回调的结果处理; })

4.2 postJson的调用

let data={ 'username' : '123' , 'password' : '123456' , 'token' : 'HSHSIHIFAUINNSNAFKSKJFNKFKFNFNFNK' };

NetUitl.postJson(url,, function (set) { switch (set.retCode) { case "0000" :

alert( "登录成功" ); break ; case "0001" :

alert( "登录失败" ); break ; default :

alert( "登录失败" );

}

});

4.3postFrom的调用

let url = Global . LOGIN; let map = new Map () map . set ( 'username' ,phone); map . set ( 'password' ,pwd); let sx = Util . mapToJson(Util . tokenAndKo( map ));

NetUitl . postFrom(url,sx,function ( set ){

switch ( set . retCode) { case "0000" :

alert( "登录成功" );

break; case "0001" :

alert( "登录失败" );

break;

default:

alert( "登录失败" );

}

});

以上就是React-Native中的网络请求的实现，欢迎大家来共同学习，有问题可以联系QQ:1561281670

这里是我的一个学习React-Native的开源库： 点击这里