如果不能从头到尾的建立一个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>
);
}
}
，如需转载请自行联系原作者
