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表示请求成功则为true
• headers (Headers) - 返回头部信息，下面详细介绍
• url (String) - 请求的地址

方法：

• text() - 以string的形式生成请求text
• json() - 生成JSON.parse(responseText)的结果
• blob() - 生成一个Blob
• arrayBuffer() - 生成一个ArrayBuffer
• formData() - 生成格式化的数据，可用于其他的请求

其他方法：

• clone()
• Response.error()
• Response.redirect()

上边就是Fetch常用的API，其他的API可以参考Fetch_API，也就是上边的网站！

参考文章：
【译】fetch用法说明
传统 Ajax 已死，Fetch 永生