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.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); });

源码