RN 的 fetch 组件网络请求

一 .网络基础

创建一个.js 文件

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';



/*
*   在 ReactNative 中,使用 fetch 实现网络请求. fetch 同 XMLHttpRequest 非常类似,是一个封装程度更高的网络 API, 使用起来很简洁,因为使用了 Promise.
*
*   Promise 是异步编程的一种解决方案,比传统的解决方案 -- 回调函数事件 -- 更合理和更强大, ES6将其写进了语言标准,统一了用法,原生提供了 Promise 对象,简单说就是一个容器,里面保存着整个未来才会起结束的事件(通常是一个异步操作)的结果
*
*   Promise 对象代表一个异步操作,有三种状态: Pending(进行中), Resolved(已完成), Rejected(已失败).
*
*   Promise 实例生成之后,可以分别指定"完成"和"失败"状态的回调函数.实现方式:链式调用方法.
*   fetch 中使用的就是该特性.
*
*   语法:
*   fetch(参数)
*   .then(完成的回调函数)
*   .catch(失败的回调函数)
*
*   fetch(url, opts)
*   .then((response) => {
*       //网络请求成功执行改回调函数,得到响应对象,铜通过 response 可以获取请求的数据
*       //例如: json,text 等等
*
*       return response.text();
*       //return response.json();
*   })
*
*   .then((resonseData) => {
*       //处理请求得到的数据
*
*   })
*   .catch((error) => {
*       //网络请求失败执行该回调函数,得到错误信息
*
*   })
*
*
* */

function getRequest(url) {
    var opts = {
        method:"GET"
    }

    fetch(url, opts)
        .then((response) =>{
            return response.text();  //返回一个带有文本对象
        })
        .then((responseText) => {
            alter(responseText);
        })
        .catch((error) => {
            alter(error);
        })
}



var GetData = React.createClass({
    render:function () {
        return(
            <View style={styles.container}>
                <TouchableOpacity onPress={getRequest.bind(this,"http://project.lanou3g.com/projects/bj/reactnative/login.php?username=niu&password=1234")}>
                     <View style={styles.btn}>
                        <Text>GET</Text>
                     </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={PostRequest.bind(this,"http://project.lanou3g.com/projects/bj/reactnative/login.php")}>
                    <View style={styles.btn}>
                        <Text>POST</Text>
                    </View>
                </TouchableOpacity>
            </View>

        );
    }
});



/*
* FormData
*
* Web 应用中频繁使用的一项功能就是表单数据的序列化, XMLHttpRequest2级定义了 FormData 类型.
* FormData 主要用于实现序列化表单以及创建与表单格式相同的数据
*
* var data = new FormData();
* data.append("name", "yihuiyun");
* append 方法接收两个参数:;链和值.分别对应表单字段和字段中包含的值,添加多个键值对.
*
* 在 jquery 中,"key1=value1&key2=value2"作为参数传入对象框架会自动封装成 FormData 形式
* 在 Fetch 中进行 post 请求时,需要自动创建FormData 对象传给 body
* */
function PostRequest(url) {
    //将"key1=value1&key2=value2"封装成 FormData 形式
    let formData = new FormData();
    formData.append("username","niu");
    formData.append("password","1234");

    var opts = {
     method:"POST",
        body:formData
    }

    fetch(url, opts)
        .then((response) =>{
            return response.text();  //返回一个带有文本对象
        })
        .then((responseText) => {
            alter(responseText);
        })
        .catch((error) => {
            alter(error);
        })


}

var styles = StyleSheet.create({
    container:{
        flex:1,
        marginTop:30,
        backgroundColor:"cyan",
        flexDirection:"row",
        justifyContent:"center",
        alignItems:"center"
    },
    btn:{
        width:60,
        height:30,
        borderWidth:1,
        borderRadius:3,
        backgroundColor:"yellow",
        borderColor:"black",
        justifyContent:"center",
        alignItems:"center"
    }

});

module.exports = GetData;

---

---

二 . 结合ListView 使用

在 .js文件中

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    ToastAndroid,
    Image,
    ListView,
} from 'react-native';
Dimensions = require('Dimensions');
width = Dimensions.get('window').width;
height = Dimensions.get('window').height;

class FetchG extends Component {

    /**
     * 初始化数据
     */
    constructor(props) {
        super(props);
        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged: ((row1, row2) => row1 !== row2)
            }),
            load: false
        }
    }

    /**
     * 渲染界面
     */
    render() {
        /**
         * 因为数据时异步加载， 用load判断是否正在加载 如果加载完毕重新刷新界面改变load值
         */
        if (!this.state.load) {
            return <Text>加载中...</Text>
        }

        return (this.renderView(this.state.dataSource))
    }


    renderView() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
            />
        )

    }

    /**
     * 重写renderRow
     */
    renderRow(rowData) {
        return (
            <View style={{ flex: 1 }}>
                <Image source={{ uri: rowData.url }}
                       style={{ width: width, height: height / 2, marginTop: 5 }}
                />

            </View>
        )
    }


    /**
     * 加载耗时操作
     */
    componentDidMount() {
        this.getDataFromFetch();
    }

    getDataFromFetch() {

        fetch('http://gank.io/api/search/query/listview/category/福利/count/10/page/1')//请求地址
            .then((response) => response.json())//取数据
            .then((responseText) => {//处理数据
                //通过setState()方法重新渲染界面
                this.setState({
                    //改变加载ListView
                    load: true,
                    //设置数据源刷新界面
                    dataSource: this.state.dataSource.cloneWithRows(responseText.results),
                })

            })
            .catch((error) => {
                console.warn(error);
            }).done();
    }
}
module.exports = FetchG;