React native中使用XMLHttpRequest请求数据

一、代码

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

//默认应用的容器组件
export default class App extends Component {

    //构造函数
    constructor(props) {
        super(props);
        this.state = {
            responseText: null
        };
    }

    //渲染
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.item} onPress={this.doXMLHttpRequest.bind(this)}>获取数据</Text>
                <Text>{this.state.responseText}</Text>
            </View>
        );
    }

    //使用XMLHttpRequest请求数据
    doXMLHttpRequest(){
        var request = new XMLHttpRequest();
        request.onreadystatechange = (e) => {
            if (request.readyState !== 4) {
                return;
            }

            if (request.status === 200) {
                alert("请求成功！");
                this.setState({responseText: request.responseText})
                console.log(request.responseText);

            } else {
                alert("请求失败！");
            }
        };

        request.open('GET', 'https://httpbin.org/get');
        request.send();
    }
}

//样式定义
const styles = StyleSheet.create({
    container:{
        flex: 1,
        marginTop:25
    },
    item:{
        margin:15,
        height:30,
        borderWidth:1,
        padding:6,
        borderColor:'#ddd',
        textAlign:'center'
    },
});

二、效果图