React Native中的网络请求fetch和简单封装

React Native中的网络请求fetch使用方法最为简单，但却可以实现大多数的网络请求，需要了解更多的可以访问：

https://segmentfault.com/a/1190000003810652

/**
* Sample React Native App
* https://github.com/facebook/react-native * 周少停 2016-09-28
* fetch请求数据 header 参数 response转json 请求方式
*/

import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';

var Project = React.createClass({
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.ssss}>
<Text>访问</Text>
</TouchableOpacity>
</View>
);
},
ssss(){
fetch('http://www.pintasty.cn/home/homedynamic', {
method: 'POST',
headers: { //header
'token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJVLTliZGJhNjBjMjZiMDQwZGJiMTMwYWRhYWVlN2FkYTg2IiwiZXhwaXJhdGlvblRpbWUiOjE0NzUxMTg4ODU4NTd9.ImbjXRFYDNYFPtK2_Q2jffb2rc5DhTZSZopHG_DAuNU'
},
body: JSON.stringify({ //参数
'start': '0',
'limit': '20',
'isNeedCategory': true,
'lastRefreshTime': '2016-09-25 09:45:12'
})
})
.then((response) => response.json()) //把response转为json
.then((responseData) => { // 上面的转好的json
alert(responseData); /
// console.log(responseData);
})
.catch((error)=> {
alert('错误了');
})
}
});

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
}
});

AppRegistry.registerComponent('Project', () => Project);

fetch是人家已经封装好,再度封装只是基于自己项目进行的封装,这里只是基于公司项目实现一下,讲解一下回调:

封装实现:

/**
* NetUitl 网络请求的实现
* https://github.com/facebook/react-native */
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
Image,
TouchableOpacity,
Platform,
AsyncStorage
} from 'react-native';

class NetUitl extends React.Component{
/*
*  get请求
*  url:请求地址
*  data:参数
*  callback:回调函数
* */
static get(url,params,callback){
if (params) {
let paramsArray = [];
//拼接参数
Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
if (url.search(/\?/) === -1) {
url += '?' + paramsArray.join('&')
} else {
url += '&' + paramsArray.join('&')
}
}
//fetch请求
fetch(url,{
method: 'GET',
})
.then((response) => {
callback(response)
}).done();
}
/*
*  post请求
*  url:请求地址
*  data:参数
*  callback:回调函数
* */
static post(url,params,headers,callback){
//fetch请求
fetch(url,{
method: 'POST',
headers:{
'token': headers
},
body:JSON.stringify(params)
})
.then((response) => response.json())
.then((responseJSON) => {
callback(responseJSON)
}) .done();
}

}

module.exports = NetUitl;

调用:

rightAction(){
let params = {'start':'0',limit:'20','isNeedCategory': true, 'lastRefreshTime': '2016-09-25 09:45:12'};
NetUitl.post('http://www.pintasty.cn/home/homedynamic',params,'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJVLTliZGJhNjBjMjZiMDQwZGJiMTMwYWRhYWVlN2FkYTg2IiwiZXhwaXJhdGlvblRpbWUiOjE0NzUxMTg4ODU4NTd9.ImbjXRFYDNYFPtK2_Q2jffb2rc5DhTZSZopHG_DAuNU',function (set) {
//下面的就是请求来的数据
console.log(set)
})
//get请求,以百度为例,没有参数,没有header
NetUitl.get('https://www.baidu.com/','',function (set) {
//下面是请求下来的数据
console.log(set)
})

}

　　

另:因为iOS9对https的调整,需要在项目的info.plist添加Key：NSAllowsArbitraryLoads,具体方法看http://www.cnblogs.com/shaoting/p/5148323.html

完整源码下载：https://github.com/pheromone/React-Native-1