React Native填坑之旅--HTTP请求篇
如果不能从头到尾的建立一个RN应用,那么RN将失色不少。本以为HTTP请求部分需要使用Native的实现,Android和iOS各回各家,各调各库了。Google了一下之后居然RN可以使用fetch库。这个库是用来代替流传已久的XHR的。
下面看看如何使用fetch 请求Restful API的。API是dribbble的。这个API需要注册,所以如果你要运行下面的例子的话,最好注册一下,或者换一个站点的API试试。
随着ES6,JavaScript内置的支持了Promise这个填补回调地狱大坑的功能。fetch很好的利用了这一点,它的请求返回结果就是Promise。所以,bye回调。
fetch的使用非常简单,比现在流行的任何Native库都好用。
fetch('https://api.dribbble.com/v1/shots', init)
.then((response) => response.json())
.then((responseJson) => {
this.setState({message: `${responseJson[0].id} - ${responseJson[0].title}`});
})
.catch(e => {console.log(`error ${e}`)});
其中的init是一个Object或者说是一个字典,里面包含了关于请求方式是GET或者POST等的信息。看起来是这样的:
const init = {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': '需要认证数据',
},
};
请求发出之后,在第一个then
方法里处理response,返回response.json()
,返回的是一个对象。
在第二个then
方法里消费从response里提取出来的json数据。因为该API返回的是一个数组,所以我们取数组第一个元素,并在Alert
中显示这个元素的id
和title
。
最后,使用一个catch
方法处理万一发生的异常。这个错误显示在了console里。你也可以显示在界面上,不过你要确保这样做复合UE的要求。在界面上显示异常用console.error(msg: string)
,显示警告使用console.warn(msg: string)
。
更新界面
上面提到的都是如何使用fetch请求的。如果你注意代码的话就会发现里面已经包含了如何更新界面的部分。这里在详细解释一下。
在constructor
方法里设置组件的state
初值为this.state = {message: ''};
。在fetch成功的获取到数据,或者出现错误的时候(本例的做法是在console里打印log,这是适合于测试不适合产品环境)更新组件的state
。
this.setState({message: `${responseJson[0].id} - ${responseJson[0].title}`});
那么组件就会根据state值更新组件:
<Text style={{marginTop: 10}}>{this.state.message ? this.state.message : "Empty"}</Text>
是不是非常简单。
全部代码
import React from 'react';
import {
View,
Alert,
Text
} from 'react-native';
import Button from '../view/touchableButton';
export default class HomeController extends React.Component {
constructor(props) {
super(props);
this.state = {
message: ''
};
this.fetchAction = this.fetchAction.bind(this);
}
componentDidMount() {
}
fetchAction() {
this.setState({message: 'Empty'});
const init = {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': '需要认证',
},
// body: JSON.stringify({
//
// })
};
fetch('https://api.dribbble.com/v1/shots', init)
.then((response) => response.json())
.then((responseJson) => {
this.setState({message: `${responseJson[0].id} - ${responseJson[0].title}`});
})
.catch(e => {console.log(`error ${e}`)});
}
render() {
return (
<View style={{flex: 1, marginTop: 100, alignItems: 'center'}}>
<Button style={{marginTop: 50}} buttonTitle='Click to fetch'
onFetch={this.fetchAction} />
<Text style={{marginTop: 10}}>{this.state.message ? this.state.message : "Empty"}</Text>
</View>
);
}
}
React Native填坑之旅--HTTP请求篇的更多相关文章
- React Native填坑之旅--与Native通信之iOS篇
终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...
- React Native填坑之旅--Flow篇(番外)
flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...
- React Native填坑之旅--布局篇
代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...
- React Native填坑之旅--Navigation篇
React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Naviga ...
- React Native填坑之旅--ListView篇
列表显示数据,基本什么应用都是必须.今天就来从浅到深的看看React Native的ListView怎么使用.笔者写作的时候RN版本是0.34. 最简单的 //@flow import React f ...
- React Native填坑之旅--组件生命周期
这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的 ...
- React Native填坑之旅--重新认识RN
如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...
- React Native填坑之旅--动画
动画是提高用户体验不可缺少的一个元素.恰如其分的动画可以让用户更明确的感知当前的操作是什么. 无疑在使用React Native开发应用的时候也需要动画.这就需要知道RN都给我们提供了那些动画,和每个 ...
- React Native填坑之旅--Button篇
从React过来,发现React Native(以下简称RN)居然没有Button.隔壁的iOS是有UIButton的,隔壁的隔壁的Android里也是有的.没有Button,就没有点击效果啊.这还真 ...
随机推荐
- python字典访问的三种方法
定义字典 dic = {'a':"hello",'b':"how"} 法一: for key in dic: print key,dic[key] # a he ...
- hbase运行shell时ERROR:org.apache.hadoop.hbase.PleaseHoldException: Master is initializing 的解决办法
这个问题困扰了我一天多的时间,百度搜索的前几条的答案也是很扯淡的,说什么把/etc/hosts文件下的127.0.1.1改成127.0.0.1就行了,我也只能呵呵了.今天早上起得很晚,中午迪哥请我们去 ...
- css之让文字在一定范围内显示,不超过固定的宽度和高度
- hive查看建表语句
查看hive建表语句:show create table tablename; 查看hive表结构:describe tablename; 简写:desc tablename;
- 聊聊javascript中的面向对象
面向对象这个东西一直晕晕乎乎的,正好这段时间没有活,可以好好整理整理了! 1.什么是对象? 其实这个说起来一切东西都是对象 2.目前我们使用对象的时候,使用的是两种设计模式杂糅起来的 分别是原型模式和 ...
- html弹出窗并用遮罩层的实例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- TJI读书笔记07-初始化
TJI读书笔记07-初始化 成员初始化 构造方法初始化 初始化块 初始化的顺序 成员初始化 java尽量去保证每个变量在使用前都会得到初始化. 对于方法局部变量,java不会自动初始化他们,如果没有显 ...
- 在where条件中使用CASE WHEN 语句
CREATE TABLE TB_Test_Report ( id int identity, stateid int, userid int, username ) ) go ,,'a') ,,'b' ...
- 手机刷机软件与ROM的盈利模式分析
一. 智能手机的兴起不过短短几年时间,更新迭代已经让实体键盘成为回忆.智能手机带来的是人们生活习惯的改变,对于手机的重度依赖,是好是坏不去评价.智能手机相对于之前的手机最大的改变不仅仅是屏幕的飞速变大 ...
- POJ(3468)
A Simple Problem with Integers http://poj.org/problem?id=3468 #include <stdio.h> struct node { ...