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メソッドにも使用できますか?

はい、AxiosはPUT、DELETE、PATCHなど様々なHTTPメソッドをサポートしており、CRUDオペレーションの全範囲に対応しています。

AxiosはFetch APIよりも優れていますか?

AxiosはよりシンプルなAPIを提供し、JSONデータを自動的に処理するため、ネイティブのFetch APIと比較してコードを簡素化できます。

ReactでAxiosを使用してリクエストのキャンセルを処理するにはどうすればよいですか?

Axiosは`CancelToken` APIを使用してリクエストをキャンセルする方法を提供しており、Reactアプリケーションでのメモリリークを防ぐのに役立ちます。

まとめ

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