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

相关文章
React Native探索系列

前言

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