React Native填坑之旅–Button篇
React Native填坑之旅–动画
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>
        );
    }
}