ReactNative fetch 网络请求

ReactNative  fetch 网络请求

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

/** fetch
 * 在ReactNative 中，使用fetch实现网络请求
 *
 * 需求一：使用 get post 方式 实现获取数据
 * 需求二：电影列表（网络请求数据）
 *
 * fetch
 * 在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((resonseDate)=>{
 * //处理请求得到的数据
 * )
 * .catch((error)=>{
 *  //网络请求失败执行该回掉函数，得到错误信息
 * )
 */


function getRequest(url) {
    // let opts = {
    //     method: "GET"
    // };
    // fetch(url, opts)
    //     .then((response) => {
    //         return response.text();//返回数据为文本
    //     })
    //     .then((responseText) => {
    //         alert(responseText);
    //     })
    //     .catch((error) => {
    //         alert(error);
    //     })
    alert(url);
}

/**
 * FormData
 *
 * web应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest2级定义了
 * FormData主要用于实现序列化表单以及创建于表单格式相同的数据
 *
 * var date=new FromData();
 * data.append("name","msg");
 * append方法接受两个参数 ：建和值 分别对应表单字段的名字和字段中包含的值
 * 添加多个键值对
 *
 * 在jquery中，“key1=value1&key2=value2”作为参数掺入对象框架会自动封装
 * 成FromData形式，在Fetch中进行post请求时，需要自动创建FromData对象传给bod
 */

function postRequest(url) {
    // //将key1=value1&key2=value2” 封装成FromData
    // let fromData = new FormData();
    // fromData.append("username", "react");
    // fromData.append("password", "native");
    //
    // let opts = {
    //     method: "POST",
    //     body: fromData
    // }
    //
    // fetch(url, opts)
    //     .then((response) => {
    //         return response.text();
    //     })
    //     .then((responseText => {
    //         alert(responseText);
    //     }))
    //     .catch((error) => {
    //         alert(error);
    //     })
    alert(url);
}

let GetData = React.createClass({
    render: function () {
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    style={styles.btn}
                    onPress={getRequest.bind(this, "https://thefountainlove.github.io/")}
                >
                    <Text>GET</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.btn}
                    onPress={postRequest.bind(this, "url")}
                >
                    <Text>POST</Text>
                </TouchableOpacity>
            </View>
        );
    }
});
let styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 30,
        backgroundColor: "cyan",
        flexDirection: "row",
        justifyContent: "space-around",
        alignItems: "center"
    },
    btn: {
        width: 50,
        height: 30,
        borderWidth: 1,
        borderRadius: 3,
        borderColor: "black",
        backgroundColor: "yellow",
        justifyContent: "center",
        alignItems: "center"
    }
});

module.exports = GetData;