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 网络请求的更多相关文章
- 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- React Native 网络请求封装:使用Promise封装fetch请求
最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...
- React Native网络请求
很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...
- react native 网络get请求方式参数不可为undefined或null
react native 网络get请求方式参数不可为undefined(为空的话默认变为)或null 错误写法: export function addToCartAction(isRefreshi ...
- React Native网络编程之Fetch
目录 1.前言 2.什么是Fetch 3.最简单的应用 4.支持的请求参数 - 4.1. 参数详讲 - 4.2. 示例 5.请求错误与异常处理 1. 前言 网络请求是开发APP中不可或缺的一部 ...
- [RN] React Native Fetch请求设置超时
一.实现思路 根据Promise.race的特性,我们在Promise.race里面添加两个任务,一个是正常的网络请求任务A,另外一个便是网络延时任务B,网络延时可以利用setTimeout方法实现. ...
- React Native之Fetch简单封装、获取网络状态
1.Fetch的使用 fetch的使用非常简单,只需传入请求的url fetch('https://facebook.github.io/react-native/movies.json'); 当然是 ...
- 给所有开发者的React Native详细入门指南
建议先下载好资料后,再阅读本文.demo代码和资料下载 目录 一.前言 二.回答一些问题 1.为什么写此教程 2.本文适合哪些人看 3.如何使用本教程 4.需要先学习JavaScript.HTML.C ...
- [书籍精读]《React Native精解与实战》精读笔记分享
写在前面 书籍介绍:本书由架构师撰写,包含ReactNative框架底层原理,以及与iOS.Android混合开发案例,精选了大量实例代码,方便读者快速学习.主要内容分为两大部分,第1部分" ...
随机推荐
- Eclipse快捷键 10个最有用的快捷键
Eclipse中10个最有用的快捷键组合 一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升. 1. ...
- 4 多表代替密码之Hill 密码_1 矩阵工具类
在说明Hill加密之前要先复习线性代数的知识,主要是关于矩阵的一些运算和概念. 一.矩阵的逆: 定义方阵M的逆矩阵应该满足M*M^-1==I,其中I是单位矩阵,比如: 但是这个地方是对英文字母进行加密 ...
- 【Excel】宏之初认识
出于提高效率的原因,希望excel能够不需要人为干预的完成一些操作,学习excel宏的编写与调试: 第一列输入公式,第二类输出计算结果:(如果自动获取文件的行数,待补充) Sub Calc() a = ...
- C# 使用IEnumerable,yield 返回结果,同时使用foreach时,在循环内修改变量的值无效(二)
前言 在上篇文章中我得出结论,遍历迭代器修改迭代器中项目的值未生效,是因为使用了yield return,并且每次遍历迭代器都执行返回迭代器的方法.这篇文章是接着上篇文章,从代码实现的角度来验证出现这 ...
- BackTrack5-r3虚拟机安装
ISOL INUX 3.63 Debian-2008-07-15 Copyright (C) 1994-2008 H. Peter Anvinboot:(按回车) 选择:BackTrack Text ...
- rtmp转m3u8
不是所有的地址改成这样都能播 需要自己测试 先说一下rtmp的其中rtmp的常见的差不多是3种 1.一种是wowza服务器的 比如这个地址rtmp://116.55.245.135:8096/live ...
- sublime text 2 ubuntu安装及插件管理
参考 dudumao 1.下载Sublime Text2官网下载地址:http://www.sublimetext.com 2.安装Sublime Text2解压即可使用 $ sudo tar -jx ...
- html、url、http、servlet&jsp之间千丝万缕的联系
html.url.http.servlet和jsp这五者一直是五位一体的关系,他们结合在一起就是对面向过程最好的解释. 客户端通过http超文本传输协议传输请求,服务器通过地址栏的url判断应该交给哪 ...
- jquery 中的 offset()
一.语法: 1.返回偏移坐标 $(select).offset(); top: $(select).offset().top; left: $(select).offset().left; 2.设 ...
- 较老版本的AFNetworking使用心得
较老版本的 AFNetworking 下载链接 ( http://pan.baidu.com/s/14Cxga ) 将压缩包中的文件夹拖入xcode工程项目中并引入如下的框架 简单的 JOSN 解析例 ...