React Native入门（八）之网络请求Fetch
前言
最近有些事情要忙，RN相关的内容没有更新，现在就来了解一下RN中进行网络请求相关的内容！
介绍
React Native提供了和web标准一致的Fetch API，用于满足开发者访问网络的需求。
关于Fetch API的相关内容，可以到下边网站了解：
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
我们这先大致说一下在RN中使用Fetch API 进行网络请求的例子，然后再去了解Fecth的相关内容！
使用Fetch
Fetch API 提供一个fetch()方法，要从任意地址获取内容的话，只需简单地将网址作为参数传递给fetch方法即可。
fetch('https://facebook.github.io/react-native/movies.json')Fetch API 是基于 Promise 设计，那么关于 Promise的内容可以参考下面的教程：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
这里简单提一下：
我们知道网络请求是一个天然的异步操作，Fetch 方法会返回一个Promise，这种模式可以简化异步风格的代码。Promise 对象是一个返回值的代理，它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值：异步方法会返回一个包含了原返回值的promise 对象来替代原返回值。
Promise有两个重要的方法，分别是resolve方法和reject方法。如果异步操作成功，则用resolve方法将Promise对象的状态变为“成功”（即从pending变为resolved）；如果异步操作失败，则用reject方法将状态变为“失败”（即从pending变为rejected）。
好了，知道了这些之后，我们来说一下如果处理网络请求返回的结果！
Fetch 方法会返回一个Promise，一个 Promise，resolve时会回传 Response 对象，也就是说请求成功，会回传一个Response 对象，这个Response 对象就包含了所有返回结果的信息！
好，下面看一个例子，也是RN中文网的例子，这里做了一些改动！
首先，我们在浏览器看一下网络请求到的内容：
{
"title": "The Basics - Networking",
"description": "Your app fetched this from a remote endpoint!",
"movies": [
{ "title": "Star Wars", "releaseYear": "1977"},
{ "title": "Back to the Future", "releaseYear": "1985"},
{ "title": "The Matrix", "releaseYear": "1999"},
{ "title": "Inception", "releaseYear": "2010"},
{ "title": "Interstellar", "releaseYear": "2014"}
]
}这个一个请求到一些电影信息的json数据。
这里我们使用fetch发送网络请求，然后将得到的json数据使用列表展示出来，下面看一下代码：
class NetText extends Component {
constructor(props) { //构造器
super(props);
this.state = { //定义的三个状态
title: '',
description: '',
movies: ''
};
}
//列表点击事件
itemClick(item, index) {
alert('点击了第' + index + '项，电影名称：' + item.title + '上映年份：' + item.releaseYear);
}
//FlatList的key
_keyExtractor = (item, index) => index;
//子item渲染
_renderItem = ({item, index}) => {
return (
<TouchableOpacity
activeOpacity={0.5}
onPress={this.itemClick.bind(this, item, index)}>
//这里index为奇偶数给不同的背景
<View style={[WebTestStyles.item, {backgroundColor: index % 2 == 0 ? 'lightgray' : 'whitesmoke'}]}>
<Text style={WebTestStyles.itemTitle}>{item.title}Text>
<Text style={WebTestStyles.itemYear}>上映年份：{item.releaseYear}Text>
View>
TouchableOpacity>
);
}
//列表分割线
_itemDivide = () => {
return (
<View style={{height: 1, backgroundColor: 'dimgray'}}/>
);
}
//getMoviesFromApiAsync() {
_fetchData = () => {
fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())//把response转为json格式
.then((jsondata) => { //上面的转好的json
//alert(jsondata.movies[0].title);
this.setState({ //将获取到的数据更新到state中
title: jsondata.title,
description: jsondata.description,
movies: jsondata.movies,
})
})
.catch((error) => {
console.error(error);
});
};
render() {
return (
<View style={WebTestStyles.container}>
<Text style={WebTestStyles.title}>{this.state.title}Text>
<Text style={WebTestStyles.description}>{this.state.description}Text>
<FlatList //列表组件
style={{marginTop: 20}}
data={this.state.movies}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ItemSeparatorComponent={this._itemDivide}/>
<Button title="请求网络" onPress={this._fetchData}/>
View>
);
}
}
;
const WebTestStyles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
},
title: {
fontSize: 20,
fontWeight: 'bold',
alignSelf: 'center'
},
description: {
fontSize: 12,
alignSelf: 'center'
},
item: {
padding: 10
},
itemTitle: {
fontSize: 18,
fontWeight: 'bold'
},
itemYear: {
fontSize: 16,
}
})然后看一下效果：
代码的话，基本上没有什么好说的，就是点击一个按钮去请求网络，然后拿到json格式的数据，两个文本字段，一个数组，然后把数组设置为FlatList的data，将电影以列表形式展示！
Fetch相关API
请求参数的设置
上面我们在请求网络的时候，只是用fetch(url)这样的形式，我们也可以设置其他的参数来请求网络，如下所示：
method: 请求使用的方法，如GET、POST。headers: 请求的头信息，形式为 Headers 对象或 ByteString。body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。mode: 请求的模式，如cors、no-cors或者same-origin。credentials: 请求的 credentials，如omit、same-origin或者include。cache: 请求的 cache 模式:default,no-store,reload,no-cache,force-cache, 或者only-if-cached。
类似这样：
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})如果你的服务器无法识别上面POST的数据格式，那么可以尝试传统的form格式，示例如下：
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'key1=value1&key2=value2'
})这个得话，就需要和做后台的同事提前沟通好就行了！
自定义Header
关于请求头Header的话，还可以通过 Headers() 构造函数来创建一个你自己的 headers 对象。
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");也可以传一个多维数组或者对象字面量：
myHeaders = new Headers({
"Content-Type": "text/plain",
"Content-Length": content.length.toString(),
"X-Custom-Header": "ProcessThisImmediately",
});自定义Request
除了上面的用法，我们还可以通过使用Request()构造函数来创建一个request对象，然后再作为参数传给fetch()。这里就相当于把url和header或者其他的参数综合起来！
比如：
var url='https://mywebsite.com/endpoint/';
var myOptions = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
var myRequest = new Request(url, myOptions );
fetch(myRequest)
.then()
...Response
属性：
status (number)- HTTP请求结果参数，在100–599 范围statusText (String)- 服务器返回的状态报告ok (boolean)- 如果返回200表示请求成功则为trueheaders (Headers)- 返回头部信息，下面详细介绍url (String)- 请求的地址
方法：
text()- 以string的形式生成请求textjson()- 生成JSON.parse(responseText)的结果blob()- 生成一个BlobarrayBuffer()- 生成一个ArrayBufferformData()- 生成格式化的数据，可用于其他的请求
其他方法：
clone()Response.error()Response.redirect()
上边就是Fetch常用的API，其他的API可以参考Fetch_API，也就是上边的网站！
参考文章：
【译】fetch用法说明
传统 Ajax 已死，Fetch 永生