React Native探索五使用fetch进行网络请求

前言

React Native可以使用多种方式来请求网络，比如fetch、XMLHttpRequest以及基于它们封装的框架，fetch可以说是替代XMLHttpRequest的产物，这一节我们就来学习fetch的基本用法。

1.get请求

fetch API是基于 Promise 设计的，因此了解Promise也是有必要的，推荐阅读MDN Promise教程。

get请求访问淘宝IP库

我们先从最基础的get请求开始，get请求的地址为淘宝IP地址库，里面有访问接口的说明。请求代码如下所示。

fetch('http://ip.taobao.com/service/getIpInfo.php?ip=59.108.51.32',{
             method: 'GET',headers: {
                'Content-Type': 'application/json'
            }
        }).then((response) => {//1
            console.log(response);
        }).catch((err) => {//2
            console.error(err);
        });

其中method用于定义请求的方法，这里不用写method也可以，fetch默认的method就是GET。fetch方法会返回一个Promise对象，这个Promise对象中包含了响应数据response，也就是注释1处的response参数。在注释1处调用then方法将response打印在控制台Console中，then方法同样也会返回Promise对象，Promise对象可以进行链式调用，这样就可以通过多次调用then方法对响应数据进行处理。在注释2处通过catch方法来处理请求网络错误的情况。
除了上面这一种写法，我们还可以使用Request，如下所示。

let request = new Request('http://liuwangshu.cn',{
            method: 'GET',headers: ({
                    'Content-Type': 'application/json'
                 })
            });
        fetch(request).then((response) => {
            console.log(response);
        }).catch((err) => {
            console.error(err);
        });

我们先创建了Request对象，并对它进行设置，最后交给fetch处理。
为了验证fetch的get请求，需要添加触发get请求的代码逻辑，如下所示。

import React,{Component} from 'react';
import {AppRegistry,View,Text,StyleSheet,TouchableHighlight} from 'react-native';
class Fetch extends Component {
    render() {
        return (
            <View style={styles.container}> <TouchableHighlight  underlayColor='rgb(210,260,260)' style={{padding: 10,marginTop: 10,borderRadius: 5,}} onPress={this.get} > <Text >get请求</Text> </TouchableHighlight> </View> ); } get() { fetch('http://ip.taobao.com/service/getIpInfo.php?ip=59.108.51.32',{ method: 'GET',}).then((response) => { console.log(response);//1 }).catch((err) => {//2 console.error(err); }); } } const styles = StyleSheet.create({ container: { alignItems: 'center',} }); AppRegistry.registerComponent('FetchSample',() => Fetch);

这里添加了一个TouchableHighlight，并定义了它的点击事件，一旦点击就会触发get方法请求网络。运行程序点击“get请求”，这时在控制台Console中就会显示回调的Response对象的数据，它包含了响应状态(status)、头部信息(headers)、请求的url（url）、返回的数据等信息。这次请求的响应状态status为200，返回的数据是JSON格式的，用Charles抓包来查看返回的JSON，如下图所示。

Response对象解析

Response对象中包含了多种属性：

status (number) ： HTTP请求的响应状态行。
statusText (String) ：服务器返回的状态报告。
ok (boolean) ：如果返回200表示请求成功，则为true。
headers (Headers) ：返回头部信息。
url (String) ：请求的地址。

Response对象还提供了多种方法：

formData()：返回一个带有FormData的Promise。
json() ：返回一个带有JSON对象的Promise。
text()：返回一个带有文本的Promise。
clone() ：复制一份response。
error()：返回一个与网络相关的错误。
redirect()：返回了一个可以重定向至某URL的response。
arrayBuffer()：返回一个带有ArrayBuffer的Promise。
blob() ：返回一个带有Blob的Promise。

接下来对返回的Response进行简单的数据处理，如下所示。

get() {
        fetch('http://ip.taobao.com/service/getIpInfo.php?ip=59.108.23.12',headers: {
                'Content-Type': 'application/json'
            }
        }).then((response) => response.json())//1
            .then((jsonData) => {//2
                let country = jsonData.data.country;
                let city = jsonData.data.city;
                alert("country:" + country + "-------city:" + city);
            });
    }

访问淘宝IP地址库会返回JSON数据，因此在注释1处调用response的json方法，将response转换成一个带有JSON对象的Promise，也就是注释2处的jsonData。最后取出jsonData中数据并展示在Alert中，这里data是一个对象，如果它是一个对象数组我们可以这样获取它的数据：

let country=jsonData.data[0].country;

点击“get请求”，效果如下所示。

2.post请求

post请求的代码如下所示。

post() {
        fetch('http://ip.taobao.com/service/getIpInfo.php',{
            method: 'POST',//1
            headers: {
                'Content-Type': 'application/json',},body: JSON.stringify({//2
                'ip': '59.108.23.12'
            })
        }).then((response) => response.json())
            .then((jsonData) => {
                let country = jsonData.data.country;
                let city = jsonData.data.city;
                alert("country:" + country + "-------city:" + city);
            });
    }

在注释1处将method改为POST，在注释2处添加请求的body。与get请求类似，这里也添加一个触发事件来进行post请求，当点击“post请求”时，查看Charles抓包的请求的信息，如下图所示。

可以看到请求数据是一个GSON字符串，因为淘宝IP库并不支持此类型的POST请求，所以不会返回我们需要的地理信息数据。

3.简单封装fetch

如果每次请求网络都要设定method、headers、body等数据，同时还要多次调用then方法对返回数据进行处理，显然很麻烦，下面就对上面例子中的get和post请求做一个简单的封装。
首先创建一个FetchUtils.js，代码如下所示。

import React,{Component} from 'react';
class FetchUtils extends React.Component {
    static send(method,url,data,callback) {
        let request;
        if (method === 'get') {
            request = new Request(url,{
                method: 'GET',headers: ({
                    'Content-Type': 'application/json'
                })
            });
        } else if (method === 'post') {
            request = new Request(url,{
                method: 'POST',headers: ({
                    'Content-Type': 'application/json'
                }),body: JSON.stringify(data)
            });
        }
        fetch(request).then((response) => response.json())
            .then((jsonData) => {
                callback(jsonData);//1
            });
    }
}
module.exports = FetchUtils;

在FetchUtils中定义了send方法，对GET和POST请求做了区分处理，并在注释1处通过callback将响应数据response回调给调用者。
最后调用FetchUtils的send方法，分别进行GET和POST请求：

let FetchUtils=require('./FetchUtils');
...

sendGet() {
        FetchUtils.send('get','http://ip.taobao.com/service/getIpInfo.php?ip=59.108.23.16','',jsonData => {
            let country = jsonData.data.country;
            let city = jsonData.data.city;
            alert("country:" + country + "-------city:" + city);
        })
    }

sendPost() {
        FetchUtils.send('post','http://ip.taobao.com/service/getIpInfo.php',{'ip': '59.108.23.16'},jsonData => {
            let country = jsonData.data.country;
            let city = jsonData.data.city;
            alert("country:" + country + "-------city:" + city);
        })
    }

这样我们使用fetch访问网络时，只需要传入需要的参数，并对返回的jsonData 进行处理就可以了。

github源码

参考资料
Fetch API
fetch-issues-274
MDN Promise教程
 ReactNative网络fetch数据并展示在listview中
 React Native中的网络请求fetch和简单封装
 在 JS 中使用 fetch 更加高效地进行网络请求
 Using Fetch

欢迎关注我的微信公众号，第一时间获得博客更新提醒，以及更多成体系的Android相关原创技术干货。
扫一扫下方二维码或者长按识别二维码，即可关注。