您的位置:首页 > 理论基础 > 计算机网络

React Native 网络请求

2016-10-12 19:26 357 查看
如下面的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);


  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: