ReactNative学习——网络请求操作（fetch使用）
实在项目中，从服务端拉取数据展示是非常普遍的一个业务需求，原生
Android开发中有很多优秀的网络框架（Volley，Okhttp，HttpConnection等），RN里面，当然也有自己的网络框架就是fetch，除了fetch外，RN中文网描述RN还内置了XMLHttpRequest API(这个真不懂），所以就用fetch来实现网络请求操作了。
fetch使用
1、最简单的使用
看官方例子，使用起来还是蛮简单的，如果只是实现请求一下服务器，不需要任何操作，直接一行代码就搞定：
//RN中文网上写的https://mywebsite.com/mydata.json是伪代码，需要替换成自己实际请求地址
fetch('http://chenxiaoping.com/demo')
2、请求头和请求参数的定义
实际应用中，当然不是像上面那样使用了，会根据自己公司的需求加上相应的请求头和请求参数，还是拿上面那个地址为例
fetch('http://chenxiaoping.com/demo', {
//请求方式，GET或POST
method: 'GET',
//请求头定义
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
//请求参数，如果有的话，可以这样方式定义,注意需要服务端支持json入参，如果不支持的话，可以尝试下面的方式
//body: JSON.stringify({
// firstParam: 'value1',
// secondParam: 'value1',
// }),
//如果服务端不支持json入参，请使用这种拼接方式
//body: 'key1=value1&key2=value2'
}).then((response) => response.json()).then(
//响应体，resonse,json拿到的就已经是转化好的jsonObject了，使用起来就非常简便
(responseJson) => {
//输出打印current_user_url字段，输出的内容可以直接在androidStudio日志输出里面看到
console.log("请求回调：" + responseJson.current_user_url);
}
)
3、完整的代码
import React, {Component} from 'react';
import {View, Text, Alert, Button, StyleSheet} from 'react-native';
class NewWorkDemoActivity extends Component {
render() {
return (
<View style={styles.style_root}>
<Text style={styles.style_text}>HelloWorldddd</Text>
<Button onPress={request} title="发起网络请求"/>
</View>
);
}
}
//请求网络
const request = () => {
console.log("点击了事件");
fetch('http://chenxiaoping.com/demo', {
//请求方式，GET或POST
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
}).then((response) => response.json()).then(
(responseJson) => {
console.log("请求回调：" + responseJson.current_user_url);
})
};
let styles = StyleSheet.create({
style_root: {
backgroundColor: "#fae",
flex: 1
},
style_text: {
margin: 20,
}
})
export default NewWorkDemoActivity
Demo地址：https://github.com/cenxiaoping/ReactNativeDemo
4、好像少了点什么，原生开发中除了请求头，请求体，还有一个很重要的参数——超时设置
看完一遍fetch的文档，好像真没找到设置超时的地方，这不太科学啊，但是在google上找到了解决方案，可以参考：
http://www.open-open.com/lib/view/open1472717659359.html
