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;