検索

Fetch API Full Guide

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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptの文字列文字を交換しますJavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

カスタムGoogle検索APIセットアップチュートリアルカスタムGoogle検索APIセットアップチュートリアルMar 04, 2025 am 01:06 AM

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です!検索をyに制限することができます

独自のAjax Webアプリケーションを構築します独自のAjax Webアプリケーションを構築しますMar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

例JSONファイルの例例JSONファイルの例Mar 03, 2025 am 12:35 AM

この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。 このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。 キー価値ペア表記を使用して、あらゆる種類を保存できます

8見事なjQueryページレイアウトプラグイン8見事なjQueryページレイアウトプラグインMar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する:8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

' this' JavaScriptで?' this' JavaScriptで?Mar 04, 2025 am 01:15 AM

コアポイント これは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。 現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。 関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call()、apply()、bind()などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした

ソースビューアーでjQueryの知識を向上させますソースビューアーでjQueryの知識を向上させますMar 05, 2025 am 12:54 AM

jQueryは素晴らしいJavaScriptフレームワークです。ただし、他のライブラリと同様に、何が起こっているのかを発見するためにフードの下に入る必要がある場合があります。おそらく、バグをトレースしているか、jQueryが特定のUIをどのように達成するかに興味があるからです

モバイル開発用のモバイルチートシート10個モバイル開発用のモバイルチートシート10個Mar 05, 2025 am 12:43 AM

この投稿は、Android、BlackBerry、およびiPhoneアプリ開発用の有用なチートシート、リファレンスガイド、クイックレシピ、コードスニペットをコンパイルします。 開発者がいないべきではありません! タッチジェスチャーリファレンスガイド(PDF) Desigの貴重なリソース

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)