React Native填坑之旅--HTTP請求篇

yexiaobai 發(fā)布于2019-08-20 11:27 / 465人閱讀

摘要：填坑之旅篇填坑之旅動畫填坑之旅請求篇如果不能從頭到尾的建立一個應(yīng)用，那么將失色不少。隨著，內(nèi)置的支持了這個填補回調(diào)地獄大坑的功能。很好的利用了這一點，它的請求返回結(jié)果就是。在界面上顯示異常用，顯示警告使用。

React Native填坑之旅--Button篇
React Native填坑之旅--動畫
React Native填坑之旅--HTTP請求篇

如果不能從頭到尾的建立一個RN應(yīng)用，那么RN將失色不少。本以為HTTP請求部分需要使用Native的實現(xiàn)，Android和iOS各回各家，各調(diào)各庫了。Google了一下之后居然RN可以使用fetch庫。這個庫是用來代替流傳已久的XHR的。

下面看看如何使用fetch 請求Restful API的。API是dribbble的。這個API需要注冊，所以如果你要運行下面的例子的話，最好注冊一下，或者換一個站點的API試試。

隨著ES6，JavaScript內(nèi)置的支持了Promise這個填補回調(diào)地獄大坑的功能。fetch很好的利用了這一點，它的請求返回結(jié)果就是Promise。所以，bye回調(diào)。

fetch的使用非常簡單，比現(xiàn)在流行的任何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或者說是一個字典，里面包含了關(guān)于請求方式是GET或者POST等的信息。看起來是這樣的：

        const init = {
            method: "GET",
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json",
                "Authorization": "需要認證數(shù)據(jù)",
            },
        };

請求發(fā)出之后，在第一個then方法里處理response，返回response.json()，返回的是一個對象。

在第二個then方法里消費從response里提取出來的json數(shù)據(jù)。因為該API返回的是一個數(shù)組，所以我們?nèi)?shù)組第一個元素，并在Alert中顯示這個元素的id和title。

最后，使用一個catch方法處理萬一發(fā)生的異常。這個錯誤顯示在了console里。你也可以顯示在界面上，不過你要確保這樣做復合UE的要求。在界面上顯示異常用console.error(msg: string)，顯示警告使用console.warn(msg: string)。

更新界面

上面提到的都是如何使用fetch請求的。如果你注意代碼的話就會發(fā)現(xiàn)里面已經(jīng)包含了如何更新界面的部分。這里在詳細解釋一下。

在constructor方法里設(shè)置組件的state初值為this.state = {message: ""};。在fetch成功的獲取到數(shù)據(jù)，或者出現(xiàn)錯誤的時候（本例的做法是在console里打印log，這是適合于測試不適合產(chǎn)品環(huán)境）更新組件的state。

this.setState({message: `${responseJson[0].id} - ${responseJson[0].title}`});

那么組件就會根據(jù)state值更新組件：

{this.state.message ? this.state.message : "Empty"}

是不是非常簡單。

全部代碼

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 (