ReactアプリケーションでHTTPリクエストを実行します。

前提と説明

必要なモジュール

axios を使用して、HTTPリクエストを行います。

実行する API

事前に適当な WEB API を準備します。今回利用するAPIの仕様は以下の通りです。リクエストメソッドは GET を使用しレスポンスデータをJSON形式で受け取ります。今回はリクエストパラメータは使用しません。

準備

axiosのインストール

axiosを使用するのでインストールします。プロジェクトディレクトリで以下のコマンドを実行します。

npm install axios --save

コンポーネント

・Appコンポーネント
HttpClientコンポーネントを呼び出し結果を受け取り、画面に表示する。

・HttpClientコンポーネント
HTTPリクエストを実行するコンポーネント。

雛形

まずは雛形を作成します。
以下は HttpClientコンポーネント になります。

import sample from './sample.json';

function HttpClient(setVal) {
    setVal(sample);
}  
export default HttpClient;

HTTPリクエストを実行せず、代わりにjsonファイルを読み込みその内容を返却します。

続いて、以下は sample.json になります。

{
    "name": "dennie"
}

続いて、Appコンポーネント です。

import React, {useState, useEffect} from 'react';
import HttpResponse from './HttpClient';

function App() {

  const [response, setResponse] = useState("");

  useEffect(() => {
    HttpResponse(setResponse);
  },[])

  return (
    <>{response ? response.name: <h1>Lording...</h1>}</>
  );
}

export default App;

APIから受け取ったレスポンスを保持するステートを使用します。
useEffectにてWEB APIを実行するHttpClientコンポーネントを呼び出します。
レスポンスの内容を画面に表示します。

useEffectについては以下を参照して下さい。

HTTPリクエストの実行

それでは、実際にWEB APIを実行します。修正するのはHttpClientコンポーネントのみになります。
以下はHttpClientコンポーネントになります。

import axios from 'axios';

function HttpClient(setVal) {
    
    // HTTPリクエストを実行する。
    axios.get('https://wey3af4xhk.execute-api.ap-northeast-1.amazonaws.com/test/sample01')
        .then(response => {
            setVal(response.data)
        })
        .catch(() => {
            console.log('通信に失敗しました');
        });
        
}

export default HttpClient;

axios の get メソッドを実行しています。web api の実行に成功すると、取得したレスポンスをステート更新関数へ渡して、ステート値を更新しています。

画面への出力内容は先程と変わりありません。データの取得先がローカルのjsonファイルかネットワークを経由して受け取ったjsonファイル(web api)かの違いとなります。

最後に

特にありません。