フェッチ API フルガイド

Fetch API の概要

Fetch API は、シンプルかつ柔軟な方法で HTTP リクエストを作成できる最新のネイティブ JavaScript API です。これは、XMLHttpRequest のような古いテクノロジに代わる、より簡単でクリーンな代替手段を提供します。 Fetch は Promise ベースです。つまり、async/await や .then() チェーンなどの最新の JavaScript 機能とうまく連携します。

Fetch API は、RESTful API と対話するためのわかりやすい方法を提供し、単純なリクエストと複雑なリクエストの両方を処理します。これは最新のブラウザで広くサポートされており、Web 開発に使用される一般的なツールです。

Fetch API の主な機能:

1. Promise ベース: Promise に基づいて構築されており、非同期コードを管理する簡単かつ直感的な方法を提供します。
2. すべての HTTP メソッドをサポートします: GET、POST、PUT、DELETE、PATCH など
3. コールバックなしの地獄: Promise のおかげで、ネストされたコールバックを回避できます。
4. ストリーム サポート: フェッチはストリームをサポートしているため、大量のデータを効率的に処理するのに適しています。
5. エラー処理の改善: XMLHttpRequest とは異なり、Fetch API は HTTP エラー ステータス (例: 404 または 500) を拒否しません。これらは手動で処理する必要があります。

インストール

Fetch API は最新の Web ブラウザに組み込まれているため、ブラウザ環境で作業している場合は何もインストールする必要はありません。これはネイティブに利用可能であり、HTTP リクエストの作成にすぐに使用できます。

ただし、Node.js 環境 (フェッチがネイティブにサポートされていない) で作業している場合は、node-fetch などのポリフィルをインストールできます。

1. npm の使用 (Node.js 環境の場合):

Node.js 環境で作業していて Fetch を使用する必要がある場合は、node-fetch をインストールできます。

npm install node-fetch

次に、それをプロジェクトにインポートします。

const fetch = require('node-fetch');

フェッチ API の使用

Fetch API は、HTTP リクエストの作成に使用できるグローバル fetch() 関数を提供します。この関数は、リクエストに対する応答を表す Response オブジェクトに解決される Promise を返します。

構文

fetch(url, [options])

パラメータ

1. url:

   • タイプ: 文字列
   • 説明: リクエストの送信先の URL。これは、完全な URL またはリクエストで定義されたベース URL に基づく相対 URL です。

2. オプション (オプション):

   • タイプ: オブジェクト
   • 説明: リクエストを変更するためのオプションの構成オブジェクト。一般的なオプションには次のようなものがあります。
     • メソッド: HTTP メソッド (例: GET、POST、PUT、DELETE)。
     • headers: リクエストに含めるカスタム ヘッダー (Content-Type、Authorization など)。
     • body: リクエストの本文 (POST や PUT などのメソッドのみ)。
     • mode: クロスオリジンリクエストを制御します。 (例: 'cors'、'no-cors'、'same-origin')。
     • cache: リクエストがキャッシュと対話する方法を指定します (例: 'no-store'、'reload')。
     • credentials: Cookie と認証を制御します (例: 'same-origin'、'include')。

基本的なフェッチリクエスト (GET)

Fetch API を使用した基本的な GET リクエストは簡単です。 fetch() 関数は、指定された URL にリクエストを作成し、Response オブジェクトで解決される Promise を返します。

コード例:

Fetch API を使用した単純な GET リクエストの例を次に示します。

npm install node-fetch

説明:

• fetch() は、指定された URL へのリクエストを開始します。
• .then(response =>response.json()): JSON データを解析して、Response オブジェクトを JavaScript オブジェクトに変換します。
• .catch(): ネットワーク エラーや失敗したリクエストなどのエラーをキャッチしてログに記録します。

Fetch を使用した POST リクエストの作成

Fetch API を使用すると、POST リクエストを行うこともできます。 POST リクエストは通常​​、フォームの送信や新しいリソースの作成など、サーバーにデータを送信するために使用されます。

POST リクエストの構文:

const fetch = require('node-fetch');

コード例:

サーバーにデータを送信する POST リクエストの例を次に示します。

fetch(url, [options])

説明:

• メソッド: 'POST': これが POST リクエストであることを指定します。
• body: JSON.stringify(postData): リクエスト本文で送信する前に、データを JSON 文字列に変換します。
• headers: Content-Type ヘッダーを application/json に設定して、送信されるデータが JSON 形式であることを示します。

応答データの処理

Fetch API によって返される Response オブジェクトには、応答データを操作するためのいくつかのプロパティとメソッドが含まれています。

主要なプロパティと応答方法:

1. response.json(): 応答本文を JSON として解析します。
2. response.text(): 応答本文を文字列として解析します。
3. response.blob(): 応答をバイナリ ラージ オブジェクトとして解析します (画像やファイルの処理に役立ちます)。
4. response.ok: 応答ステータス コードが 200 ～ 299 (成功) の範囲にあるかどうかを示すブール値。
5. response.status: 応答の HTTP ステータス コード (例: 成功の場合は 200、見つからない場合は 404)。
6. response.headers: リクエストに応じてサーバーから返されたヘッダー。

コード例:

さまざまなタイプの応答データを処理する方法の例を次に示します:

npm install node-fetch

説明:

• response.ok は、応答が成功したかどうかを確認します (ステータス コード 200-299)。そうでない場合は、エラーがスローされます。
• response.json() は、応答を JavaScript オブジェクトとして解析するために呼び出されます。

フェッチ時のエラーの処理

XMLHttpRequest とは異なり、Fetch API は HTTP エラー ステータス (例: 404 または 500) を自動的に拒否しません。ネットワーク障害が発生した場合、またはリクエストがブロックされた場合にのみ拒否されます。 404 や 500 などのエラーを処理するには、response.ok プロパティを確認する必要があります。

エラー処理の例:

Fetch でエラーを効果的に処理する方法の例を次に示します。

const fetch = require('node-fetch');

説明:

• response.ok: 応答ステータス コードが 200 ～ 299 の範囲内 (成功を示す) かどうかをチェックします。
• リクエストが失敗した場合 (404 エラーや 500 エラーなど)、対応するステータス コードでエラーがスローされます。

結論

Fetch API は、JavaScript で HTTP リクエストを作成するための強力で最新のツールです。 REST API を操作するクリーンで直感的な方法を提供し、Promise ベースのアーキテクチャにより非同期コードの管理が容易になります。すべての HTTP メソッド、エラー処理、応答解析をサポートする Fetch は、Web 開発者にとって不可欠なツールです。

データの取得、フォームの送信、認証の処理のいずれの場合でも、Fetch API は HTTP リクエストに対する柔軟性と制御を提供するため、最新の Web アプリケーションにとって優れた選択肢となります。

以上がフェッチ API フルガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。