React-Native学习笔记之：Fetch网络请求

fetch是React Native中的网络请求中最为简单的方法，可以实现大多数的网络请求。把学习的相关知识记录一下：

FetchDemo.js文件

import React, {Component} from  'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} from 'react-native';
export default class FetchDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            //定义Get请求返回的数据
            result: '',
            //定义POST请求返回的数据
            post: ''
        }
    }

    //GET请求获取网络数据，参数是请求地址
    getData(url) {
        fetch(url).then(response => response.json())
            .then(result => {
                this.setState({
                    //请求结果
                    result: JSON.stringify(result)
                })
            })
            .catch(error => {
                this.setState({
                    //请求错误处理
                    result: JSON.stringify(error)
                })
            })
    }

    //POST请求获取网络数据，参数是请求地址及要传递的参数
    postData(url, params) {
        fetch(url, {
            method: 'POST',
            header: {
                //设置响应返回的数据格式
                'Accept': 'application/json',
                //设置传递参数的数据格式
                'Content-Type': 'application/json'
            }, body: JSON.stringify(params)
        })
            .then(response => response.json())
            .then(result => {
                this.setState({
                    //请求结果
                    post: JSON.stringify(result)
                })
            })
            .catch(error => {
                this.setState({
                    //请求错误处理
                    post: JSON.stringify(error)
                })
            })
    }

    render() {
        return (<View style={styles.container}>
            <Text style={styles.text} onPress={()=>{
                this.getData("http://localhost:8080/app/Login.json?userName=ldm&password=123456")
            }}>点击通过Fetch进行Get请求</Text>
            <Text style={styles.result}>Get请求结果:{this.state.result}
            </Text>
            <Text style={styles.text} onPress={()=>{
                this.postData("http://localhost:8080/app/Login.json",{
                    userName:'ldm',
                    password:'123456'
                })
            }}>点击通过Fetch进行POST请求</Text>
            <Text style={styles.result}>POST请求结果:{this.state.post}
            </Text>
        </View>)
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'gray'
    },
    text: {
        fontSize: 20,
        color: 'black',
        margin: 10
    },
    result: {
        fontSize: 20,
        color: 'blue',marginLeft:10
    }
});

运行入口index.android.js

import React, {Component} from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    Navigator
} from 'react-native';
import FetchDemo from './FetchDemo'
export default class StudyGithub extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'Popular'
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Navigator
                    initialRoute={{component:FetchDemo}}
                    renderScene={(route,navigator)=>{
                        let Component=route.component;
                        return <Component navigator={navigator}{...route.params}/>
                    }}
                ></Navigator>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

AppRegistry.registerComponent('StudyGithub', () => StudyGithub);

运行在Android手机上效果：

点击后请求结果如图：