初めてのReactNativeメモ④ HTTPクライアント「axios」を使ってみる

axiosとは

ブラウザや node.js で動く Promise ベースのHTTPクライアントである｡REST-API を実行したいときなど､これを使うと実装が簡単にできる｡
qiita.com

HTTPクライアント？

1.Webブラウザが「HTTPリクエスト」を投げる

2.サーバ側でリクエストを解析・処理してリクエストの答えを作る

• パース：送られてきたリクエストを解釈する

• データの取得：送られてきたURIを元に必要なデータを取りに行く

• レスポンス文字列の作成

3.Webサーバがブラウザに「HTTPレスポンス」を返す

超絶初心者のためのサーバとクライアントの話 - Qiita

Promise ベース?

.ajaxやFetch APIと一緒？
よくわからんが簡単で使いやすいらしい！

今回やること

React NativeでAPIから画像を取得して表示する【チュートリアル】 | RARA Worldを参考にaxiosを使ってWebAPIから画像を取得して表示してみます。

今までやったことを復習もかねて使っていきたいです。

yarn add axios

axios

.get(エンドポイント, { params: {送りたいパラメーターの指定}　})
.then((results) => {
// 通信に成功してレスポンスが返ってきた時に実行したい処理
}
.catch((error) => {
// 通信に失敗してレスポンスが返ってこなかった時に実行したい処理
}

簡単なaxiosの使い方を説明します。axios.getは引数を二つとり、
第一引数にはエンドポイント、第二引数に渡したいパラメータをparamsで指定します。
そして、レスポンスが返ってきたかどうかで挙動が変わります。

レスポンスが返ってきた時

• 返ってきたデータがresultsの中に入り、thenが走る。

レスポンスが返ってこなかった時

• errorメッセージがerrorに入り、catchが走る。

このような流れでaxios.get()は動きます。

ReactでAxiosを使ってGoogleAPIを叩いてみた - Qiita

前回やったとおりコンポーメントを作って読み込ませる

components > Axihtpapi.js

import React, { Component } from 'react';
import { StyleSheet, Button, View, Text, FlatList } from 'react-native';
import axios from 'axios';

class restlist extends Component {

state = {
images: []
}

componentWillMount() {
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(res => {
this.setState({ images: res.data });
});
}

}

componentWillMount

ComponentがDOMツリーに追加される前に一度だけ呼ばれます。

なので初期化処理を行うのに適しています。

この中でsetStateするとrender時にまとめて行われます。

server-side rendering時にも呼ばれるのでどちらでも動くコードである必要があります。

qiita.com

components > ImageMain.js

const { title, image } = imageInfo;
const { imageStyle, textStyle, wrapperStyle } = styles;

 

return (
<View style={wrapperStyle}>
<Text style={textStyle}>{title}</Text>
<Image
source={{ uri: image }}
style={imageStyle}
/>
</View>
)

const { imageStyle, textStyle, wrapperStyle } = styles;で一気に指定してるんですね！

参考になります。

気が付いたこと

Axihtpapiで大文字でないといけない可能性

import Axihtpapi from './src/components/axihtpapi';

以下では読み込めなかった

import axihtpapi from './src/components/axihtpapi';

APP.js

import Axihtpapi from './src/components/axihtpapi';
 
<Axihtpapi />

次は画像タップでdetailに飛ばしてみる