ReactNative用Fetch实现网络请求

      最近在学习ReactNative的网络知识，看了不少文章，讲的都比较复杂，还推荐让学习promise，但是对于一个没有js和react基础的纯新人来说，那些原理显得有点难度，我个人建议初学者不需要看，先学会Fetch的用法就行了，原理以后慢慢就会了解。我根据自己看的一些文章和例子，写了一个对于新手来说，非常友好的用Fetch进行网络请求的Demo，堪称关于Fetch用法的HelloWorld级别的例子。只要你根据ReactNative中文网，把网络之前的文章都看明白了，理解了props和state的用法，那么，接下来的例子，对于你来所，就不具备额外的难度了，只需要根据这个例子来学习用Fetch来进行网络请求。下面的例子没有涉及网络请求时上传参数的用法，有需要的，可以去自己查一查相关的文章。

      我写的这个例子，只有一个功能，在页面里有一个<Text>组件，网络请求成功后，改变<Text>的显示内容，把请求到的数据显示出来，就这么简单。下面上代码，可以拷贝到自己的项目里运行一下试试。

import React,{Component} from 'react';
import {Text} from 'react-native';

export default class FetchDemo extends Component{

      constructor(props){
        super(props);
        this.state = {text:'正在进行网络请求，请稍等。。'}       //在构造函数中自定义了一个state并且初始化
      }

      render(){
        return(
          <Text>{this.state.text}</Text>                      //整个界面只显示一个Text组件，网络请求成功后，显示的内容发生变化
        );
      }

      componentDidMount(){                                   //生命周期函数，页面渲染完成后会主动回调该方法
        this.startFetch();
      }

      startFetch(){                                           //自定义的用Fetch进行网络请求的方法
        const url = 'https://facebook.github.io/react-native/movies.json';
        fetch(url)
        .then(response=>response.json())
        .then(responseJson=>{
          let movieArr = responseJson.movies;
          this.setState({text:movieArr.length});
        })
        .catch(error=>console.error(error));
      }
}

        因为<Text>组件的显示内容要发生变化，所以必须借助state，用state来指定显示的内容。

        还涉及到了一个新的方法，componentDidMount()在页面渲染完成后自动调用，这个方法我也是看了其他博客才知道的，个人觉得是生命周期的一个方法，因为我的生命周期还没学，这个先了解下就行。

       主要的就是Fetch进行网络请求的方法：1.调用fetch()方法进行网络请求，把url地址传进去。2.请求成功后，得到一个response对象，调用response.json()方法，就可以得到接口返回的数据了。3.根据自己的需要，自己处理返回的数据。4.调用catch()方法，捕获异常。

        我调用的接口，返回的是一个对象，里面包含了一个属性名为movies的对象数组，在请求成功后，我把数组的长度显示出来了。有一个我还没明白的就是，得到数据后，调用this.setState()方法，刷新state，然后<Text>显示的内容自动就变了，没有手动去重新渲染界面。应该是state变化后，会执行回调函数，组件自己重新进行了渲染。这些东西以后再慢慢研究。

        大家写完这个例子后，可以再看看其他相关的文章，可以更好的理解。