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);
相关文章推荐
- React-Native 在iOS9之后,网络请求默认为Https请求,如需支持Http,修改info.plist文件添加键值对设置允许http访问。
- React Native 网络请求封装:使用Promise封装fetch请求
- react native 开发框架,封装网络请求,自定义控件,常用工具类
- React Native中的网络请求fetch和简单封装
- React-Native中网络请求的总结
- react-native 网络请求,超时总结
- react-native 项目实战 -- 新闻客户端(4) -- 请求网络数据
- 关于React Native 网络请求以及变量赋值的问题
- React-Native 学习笔记十七(网络请求)
- React-Native傻瓜式学习笔记(三):基于事件发布/订阅的网络请求工具类封装
- React-Native中网络请求的总结
- React Native 全局属性和方法,全局Log, Api网络请求,全局样式
- React Native中的网络请求fetch和简单封装
- React-Native网络请求加载界面
- React-Native学习笔记之:Fetch网络请求
- React-Native中网络请求的总结
- 【React Native开发】 - fetch网络请求
- react-native网络请求Fetch中遇到的坑
- React Native中的网络请求fetch和简单封装
- React Native探索(五)使用fetch进行网络请求