React で REST API をフェッチおよび Axios と統合する方法-jsチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-12-25 20:15:23

オリジナル

620 人が閲覧しました

How to Integrate REST APIs in React with fetch and 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 サイトの他の関連記事を参照してください。