首页 > 代码库 > React Native 网络请求

React Native 网络请求

如下面的Code,分别介绍了GET,POST,以及使用XMLHttpRequest的Get请求。

import React, { Component } from ‘react‘;import { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity, TouchableHighlight, ToastAndroid, Alert, } from ‘react-native‘;var BASE_URL = ‘https://m.baidu.com‘;class AlignItemsBasics extends Component {    getEvent() {        fetch(‘https://m.baidu.com‘ )            .then((response) => response.text())            .then((responseText) => {              ToastAndroid.show(responseText, ToastAndroid.SHORT);              console.warn(new Date().getMilliseconds());            })            .catch((error) => {              console.warn(error);            }).done();    }    getByXMLHttpRequest(){        var request = new XMLHttpRequest();        request.onreadystatechange = (e) => {            if(request.readyState !== 4){                return;            }            if(request.status === 200){                ToastAndroid.show(‘success‘ + request.responseText, ToastAndroid.SHORT);            }else{                ToastAndroid.show(‘error‘, ToastAndroid.SHORT);            }        };        request.open(‘GET‘,‘http://xxx/xxx‘);        request.send();    }     postSource(){        fetch(‘https://m.baidu.com‘ ) //        .then((response) => response.text())        .then((responseText) => {            // Works on both iOS and Android            Alert.alert(              ‘请求结果‘,              responseText.substring(0,100),              [                {text: ‘Ask me later‘, onPress: () => console.warn(‘Ask me later pressed‘)},                {text: ‘Cancel‘, onPress: () => console.warn(‘Cancel Pressed‘), style: ‘cancel‘},                {text: ‘OK‘, onPress: () => console.warn(‘OK Pressed‘)},              ]            )        })        .catch((error) => {          console.warn(error);        }).done();      }    render() {      return (        <View style={{flex:1, justifyContent:‘center‘, alignItems:‘center‘}}>            <TouchableHighlight  onPress={this.getEvent} style={styles.button}>                  <Text>Get 请求</Text>            </TouchableHighlight>             <TouchableHighlight  onPress={this.getByXMLHttpRequest} style={styles.button}>                  <Text>使用XMLHttpRequest Get 请求</Text>             </TouchableHighlight>             <TouchableHighlight  onPress={this.postSource} style={styles.button}>                  <Text>Post 请求</Text>             </TouchableHighlight>        </View>      );    }};    var styles = StyleSheet.create({        button: {          width : 180,          height: 50,          justifyContent:‘center‘,          backgroundColor: ‘#e2e2e2‘,          alignItems:‘center‘,          margin: 10,        }    });AppRegistry.registerComponent(‘AwesomeProject‘, () => AlignItemsBasics);

  

 

React Native 网络请求