Axiosを使用したReactでのGETおよびPOSTリクエストの例

Axiosは、ReactアプリケーションでのHTTP通信を簡素化するPromiseベースのHTTPクライアントです。APIからのデータ取得やサーバーへのデータ送信などのタスクを効率化します。このガイドでは、ReactでAxiosを使用する方法について、GETリクエストとPOSTリクエストの実例を交えて解説します。

ReactでのAxiosのセットアップ

ReactプロジェクトでAxiosを使い始めるには:

1. Axiosのインストール:

   npm install axios
   

2. コンポーネントでのAxiosのインポート:

   import axios from 'axios';
   

GETリクエストの実行

GETリクエストは指定されたエンドポイントからデータを取得します。ReactコンポーネントでAxiosを使用してGETリクエストを実行する方法は次のとおりです:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function DataFetchingComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('データ取得エラー:', error);
      });
  }, []);

  return (
    <div>
      <h1>投稿一覧</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetchingComponent;

説明:

• 状態の初期化: useStateでdataを空の配列として初期化します。
• データの取得: axios.getでAPIエンドポイントからデータを取得します。
• Effect Hook: useEffectを使用して、コンポーネントのマウント後にGETリクエストが一度だけ実行されるようにします。
• エラー処理: エラーはキャッチされ、コンソールにログ出力されます。

POSTリクエストの実行

POSTリクエストはサーバーにデータを送信し、新しいリソースを作成します。ReactコンポーネントでAxiosを使用してPOSTリクエストを実行する方法は次のとおりです:

import React, { useState } from 'react';
import axios from 'axios';

function CreatePostComponent() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const post = { title, body };
    axios.post('https://jsonplaceholder.typicode.com/posts', post)
      .then(response => {
        console.log('投稿作成:', response.data);
      })
      .catch(error => {
        console.error('投稿作成エラー:', error);
      });
  };

  return (
    <div>
      <h1>投稿作成</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>タイトル:</label>
          <input
            type=""text""
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </div>
        <div>
          <label>本文:</label>
          <textarea
            value={body}
            onChange={(e) => setBody(e.target.value)}
          />
        </div>
        <button type=""submit"">送信</button>
      </form>
    </div>
  );
}

export default CreatePostComponent;

説明:

• 状態の初期化: useStateでtitleとbodyを空文字列として初期化します。
• フォーム処理: フォームは投稿のタイトルと本文のユーザー入力をキャプチャします。
• 送信関数: handleSubmitはデフォルトのフォーム送信動作を防止し、postオブジェクトを構築してaxios.postで送信します。
• エラー処理: エラーはキャッチされ、コンソールにログ出力されます。

よくある質問

まとめ

AxiosはReactアプリケーションでのHTTPリクエスト処理に威力を発揮するツールです。GETリクエストとPOSTリクエストの実行方法を理解することで、APIとの効率的なやり取りとReactコンポーネント内でのデータ管理が可能になります。