国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

yexiaobai / 456人閱讀

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

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中顯示這個元素的idtitle。

最后,使用一個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值更新組件:

{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 (
            
                

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80580.html

相關文章

  • React Native填坑之旅--class(番外

    摘要:構造函數定義偵探類作為例子。里的既是類的定義,也是構造函數。在構造函數中定義的實例方法和屬性在每一個實例中都會保留一份,而在原型中定義的實例方法和屬性是全部實例只有一份。 無論React還是RN都已經邁入了ES6的時代,甚至憑借Babel的支持都進入了ES7。ES6內容很多,本文主要講解類相關的內容。 構造函數 定義偵探類作為例子。 ES5的類是如何定義的。 function ES5D...

    TwIStOy 評論0 收藏0
  • 前端相關大雜燴

    摘要:希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎,由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時,老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。 前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單 原文地址:Learning React.js is easier than you think 原文作...

    fuyi501 評論0 收藏0
  • 我的Android重構之旅:架構

    摘要:是的架構的實現。是在年提出的一種前端架構,主要用來處理復雜的邏輯的一致性問題當時是為了解決頁面的消息通知問題。 去年10月底來到了新公司,剛開始接手 Android 項目時,發現該項目真的是一團遭,項目開發上沒有任何架構可言,開發人員連簡單的 MVC、MVP 都不了解,Activity 及其臃腫,業務邊界也不明確,因此我決定重新分析一下當前主流的幾種開發架構,選出適合當前項目的架構形式...

    mylxsw 評論0 收藏0
  • React Native 極光推送填坑(ios)

    摘要:前言前一段時間,完成了公司的消息推送功能,使用的是極光推送,在配置的推送功能時,遇到了一個坑,記錄一下坑使用了極光推送官方的插件。 前言 前一段時間,完成了公司 app 的消息推送功能,使用的是極光推送,在配置 ios 的推送功能時,遇到了一個坑,記錄一下 坑 使用了極光推送官方的插件 jpush-react-native。按照文檔,將 ios 和 android 配置好,結果發現 a...

    Travis 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<