React Native Get,Post请求

React Native为我们提供了fetch框架进行网络请求。

Fetch请求

static async request(url, method, body, params) {
DEBUG && console.log("#REQUEST NetUtil# [" + method + "] url=" + url + ",body=" + body);
var timestamp=new Date().getTime()/1000;//当前时间毫秒值
var user=await AsyncStorage.getItem('user');//缓存本地的用户数据
var token='';//用户token
if(user!=null){
token=JSON.parse(user).token;
}else{
token='';
}
var sign= await Sign.createSign(params,timestamp);//获取签名
return new Promise((resolve, reject)=> {
fetch(url, {
method: method,
body: body,
headers: new Headers({
'uid': '867909021770429',
'token':token,
'timestamp':timestamp,
'sign':sign,//签名
'Content-Type': 'application/x-www-form-urlencoded',
'Connection': 'close'
}),
})
.then((response)=> {
if(response.ok){
return response.json();
}else{
reject("服务器错误!");
}
})
.then((json)=> {
DEBUG && console.log("#RESPONSE# NetUitl ["+method+"] url = "+url+", body = "+body+",responseData="+json);
if(json.code==Constant.SUCCESS){
resolve(json.data);
}else{
reject(data.msg);
}
})
.catch((error)=> {
DEBUG && console.log("#RESPONSE# NetUitl ["+method+"] url = "+url+", body = "+body+", error="+error);
reject("服务器错误!");
});
});
}

通过fetch（）函数我们可以指定请求的url，请求的method，请求的body以及请求的headers，fetch函数返回一个Promist对象，请求成功后会返回请求的Response对象，response.ok会过滤掉404，500这些请求错误，通过response.json()方法我们就可以获得JOSN格式的服务器返回给我们的数据。

Get请求

//get请求 params为一个Map对象
static get(url, params) {
if (params) {
let paramsArray = []
for(var item of params.entries()){
paramsArray.push(item[0]+'='+encodeURIComponent(item[1]));
}
if (url.search(/\?/) === -1) {//拼接url
url += '?' + paramsArray.join('&')
} else {
url += '&' + paramsArray.join('&')
}
}
return this.request(url, 'get', undefined, params);
}

Post请求

//pos请求
static post(url, params) {
var body = '';
for (let item of params.entries()) {//拼接body
body += item[0] + "=" + item[1] + "&";
}
body = body.substring(0, body.length - 1);
return this.request(url, 'post', body, params);
}

使用

get方式

var params = new Map();
params.set('pageNo', 1);
params.set('pageSize', 20);
params.set('version', '1.0.1');
params.set('platform', 'android');
params.set('provinceCode', '310000');
return dispatch=> {
NetUtil.get(HttpUrl.QUERY_DYNAMIC_LIST, params)
.then((result)=> {
console.log(result);
dispatch({
type: ActionTypes.ACTION_DYNAMIC_LIST,
dynamicList: result,
})
}, (error)=> {
console.log('error' + error);
});
}

post方式

var params=new Map();//请求的参数
params.set('username',this.state.username);
params.set('password',this.state.password);
params
ab01
.set('cid','53b857f07b3ace9bdb2b99e0d65dc123');
params.set('loDeviceInfo','AndroidA31');
params.set('platfrom','Android');
NetUtil.post(HttpUrl.LOGIN_URL,params)
.then((result)=>{
AsyncStorage.setItem("user",JSON.stringify(result));//保存用户数据到本地
NavigatorRoute.replaceToMainScene(this.props.navigator);//跳转到主页
},(error)=>{
ToastAndroid.show(error,ToastAndroid.SHORT);
});

源码