Expo CLIを使ってnativeアプリ開発入門編④axiosでAPI取得│tech1000+

1 はじめに
2 axiosのパッケージを追加する
3 axiosをimportし、リクエストの処理を書く
4 解説
- 4.1 Share this:

はじめに

前回の記事で、ボタンを押したときに決め打ちの情報を表示させるというところをやりました。
今回は郵便番号検索APIを叩いて、入力した郵便番号から住所を取得しアプリで表示するというのをやってみます。

axiosのパッケージを追加する

公式のドキュメントを読むと、fetchするだけで良いと書いてありますが、ここではaxiosを使ってAPIリクエストを送ります。
まずはプロジェクトがあるディレクトリ下でコマンドを叩きaxiosのパッケージを追加します。

npm i axios

axiosをimportし、リクエストの処理を書く

前回の記事のMain.jsを編集します
※前回の記事ではボタンの処理をFooter.jsに書いていましたが、ボタンの処理もMain.jsに移動させています。

import React, { Component }  from 'react';
import { StyleSheet, Text, View, Button, Alert, TextInput } from 'react-native';
// axiosのインポート
import axios from 'axios';

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            code: '',
        };
    }

    _onPressButton() {
        // ボタンが押されたときに、入力した番号をパラメータにし
        // APIリクエストを送る
        axios.get('http://zipcloud.ibsnet.co.jp/api/search', {
            params: {
                zipcode: this.state.code
            }
        })
        .then(response => {
            let address = response.data.results
            var addList = ''
            for(i=0;address.length>i;i++){
                addList += address[i].address1 + address[i].address2 + address[i].address3
            }

            Alert.alert(addList)
            return

        }).catch(err => {
            console.log('err:', err);
            return
        })
        
    }

    
    render() {
        return (
            <View style={styles.container}>
                <Text style={{padding: 10, fontSize: 20}}>
                    郵便番号を入れてね
                </Text>
                <TextInput
                    style={{height: 50}}
                    placeholder="例）0010001"
                    onChangeText={(code) => this.setState({code})}
                />
                <Text>
                    プレビュー：{this.state.code}
                </Text>
                <Button
                    onPress={this._onPressButton.bind(this)}
                    title="Press Me"
                    color="red"
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 2,
        backgroundColor: 'powderblue',
        alignItems: 'center',
        justifyContent: 'center',
    },
});