React Native埋め立ての旅--HTTP請求編

3764 ワード

fetch react-native javascript

React Native埋め立ての旅--Button編React Native埋め立ての旅--動画React Native埋め立ての旅--HTTP請求編
最初から最後までRNアプリケーションを確立できないと、RNは少なからず色を失う.HTTP要求部分はNativeを使う必要があると思いますが、AndroidとiOSは各ライブラリに戻ります.Googleに来たら、なんとRNがfetchライブラリを使うことができます.このライブラリは古くから伝わるXHRの代わりに使われています.
次に、fetful APIの使い方を見てみます.APIはdribbleのものです.このAPIは登録が必要ですので、次の例を実行するなら、登録してみてください.あるいは他のサイトのAPIを試してみてください.
ES 6に伴い、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': '      ',
            },
        };

要求が出された後、第1のthen方法でレスポンスを処理し、response.json()に戻り、オブジェクトを返します.
第二のthen方法では、レスポンスから抽出したjsonデータを消費します.APIは1つの配列に戻るので、配列の最初の要素をとり、Alertにこの要素のidおよびtitleを表示する.
最後に、万一の異常をcatch方法で処理する.このエラーはコンサートソロに表示されています.インターフェースにも表示できますが、このようにして、複合UEの要求を確認してください.インタフェースに異常用console.error(msg: string)を表示し、警告用console.warn(msg: string)を表示します.
画面を更新
上記のようにfetchを使って要請しました.コードに注意すると、画面の更新方法が含まれていることが分かります.ここで詳しく説明します.constructor方法において、コンポーネントを設定するstateの初期値はthis.state = {message: ''};である.fetchがデータの取得に成功した場合、またはエラーが発生した場合(本例ではconsoneでロゴを印刷しています.これは製品環境に適合しないテストに適しています.)にコンポーネントを更新する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 (


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

DeepLearning 4 J入門——コンピュータに『天龍八部』を読ませる