React で REST API をフェッチおよび Axios と統合する方法

React での REST API の統合

REST API を React アプリケーションに統合することは、Web 開発者にとって一般的なタスクです。 REST (Representational State Transfer) は、GET、POST、PUT、DELETE などの HTTP メソッドを介して外部リソース (データ) と対話できるようにするアーキテクチャ スタイルです。React を使用すると、REST API との統合が容易になり、データをフェッチできるようになります。 、新しいデータを投稿し、さまざまな API 応答を効率的に処理します。

このガイドでは、Fetch API、Axios、非同期データ取得の処理などのさまざまなメソッドを使用して、REST API を React アプリに統合する方法を説明します。

---

1. REST API からデータを取得する

fetch() 関数は JavaScript に組み込まれており、HTTP リクエストを作成する簡単な方法を提供します。リクエストに対する応答を表す Response オブジェクトに解決される Promise を返します。

React でのフェッチ API の使用

これは、フェッチ API を使用して REST API からデータを取得し、それを React コンポーネントに表示する簡単な例です。

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example REST API

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• useState: 投稿、読み込み状態、およびエラー メッセージを保存するために使用されます。
• useEffect: コンポーネントがマウントされたときにデータのフェッチを処理します。
• fetch(): REST API エンドポイントからデータを取得し、それを JSON 形式に処理します。
• エラー処理: エラー (ネットワークの問題など) を捕捉し、エラー状態を設定します。

---

2. API リクエストに Axios を使用する

Axios は、ブラウザーおよび Node.js 用の Promise ベースの HTTP クライアントです。これはフェッチの代替手段であり、その簡潔な構文と、自動 JSON 変換、リクエストのキャンセルなどの追加機能により、多くの場合好まれます。

Axios のインストール

Axios を使用するには、まず npm 経由でインストールします。

npm install axios

Axios を使用してデータをフェッチする

これは上記と同じ例ですが、Axios を使用しています。

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API using Axios
    axios
      .get(API_URL)
      .then((response) => {
        setPosts(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• axios.get(): REST API からデータを取得します。 Axios は、応答を JSON として自動的に解析します。
• エラー処理: エラーがある場合は、エラーが捕捉され、コンポーネントに表示されます。

---

3. REST API へのデータの送信 (POST リクエスト)

GET リクエストに加えて、POST リクエストを使用してサーバーにデータを送信できます。これは、フォームの送信や新しいレコードの作成によく使用されます。

POST リクエストにフェッチを使用する

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example REST API

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FetchPosts;

• POST リクエスト: データを JSON 形式で API に送信します。この場合、タイトルと本文を含む新しい投稿を送信します。
• JSON.stringify(): JavaScript オブジェクトをリクエスト本文の JSON 文字列に変換します。

POST リクエストに Axios を使用する

npm install axios

• axios.post(): API に POST リクエストを送信します。リクエスト本文には、送信するデータが含まれます。

---

4.結論

REST API を React アプリケーションに統合することは、最新の Web 開発にとって重要なスキルです。 fetch() を使用するか、Axios などのライブラリを使用するかに関係なく、React は API リクエストを管理し、レスポンスに基づいて UI を更新するための useEffect や useState などの強力なフックを提供します。データの取得、送信、エラーの処理を適切に実行できるため、スムーズなユーザー エクスペリエンスが保証されます。

---

以上がReact で REST API をフェッチおよび Axios と統合する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。