Fetch API をマスターする: JavaScript での HTTP リクエストを簡素化する

JavaScript フェッチ API

Fetch API は、HTTP リクエストの作成に使用される JavaScript の最新の Promise ベースのインターフェイスです。これにより、サーバーからリソースを取得するプロセスが簡素化され、XMLHttpRequest などの古いメソッドが置き換えられます。 Fetch は、ネットワークのリクエストとレスポンスを処理するための、よりクリーンで読みやすいアプローチを提供し、Promise、ストリーミング、async/await などの機能をサポートします。

---

1. Fetch API の主な機能

• Promise-Based: 非同期操作を処理するためのより洗練された方法を提供します。
• 簡略化された構文: XMLHttpRequest と比較して読みやすくなっています。
• ストリーミングのサポート: 大規模な応答を効率的に処理します。
• 拡張性: 最新の JavaScript ツールおよびライブラリと簡単に統合できます。

---

2. Fetch の基本構文

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

---

3. GET リクエストを行う

フェッチのデフォルトは GET メソッドです。

例:

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

---

4. POST リクエストを行う

サーバーにデータを送信するには、options オブジェクトの body プロパティを指定して POST メソッドを使用します。

例:

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log("Response:", data))
  .catch(error => console.error("Error:", error));

---

5.一般的なフェッチ オプション

フェッチ関数は、リクエストを構成するためのオプション オブジェクトを受け入れます:

Option	Description
method	HTTP method (e.g., GET, POST, PUT, DELETE).
headers	Object containing request headers.
body	Data to send with the request (e.g., JSON, form data).
credentials	Controls whether cookies are sent with the request (include, same-origin).

オプション

---

説明

メソッド HTTP メソッド (例: GET、POST、PUT、DELETE)。 ヘッダー リクエスト ヘッダーを含むオブジェクト。 本文 リクエストとともに送信するデータ (JSON、フォーム データなど)。 資格情報 Cookie をリクエスト (含む、同一オリジン) とともに送信するかどうかを制御します。

6.応答の処理

Method	Description
response.text()	Returns response as plain text.
response.json()	Parses the response as JSON.
response.blob()	Returns response as a binary Blob.
response.arrayBuffer()	Provides response as an ArrayBuffer.

フェッチ呼び出しからの Response オブジェクトには、データを処理するメソッドが含まれています: メソッド 説明 response.text() 応答をプレーンテキストとして返します。 response.json() レスポンスを JSON として解析します。 response.blob() 応答をバイナリ Blob として返します。 response.arrayBuffer() 応答を ArrayBuffer として提供します。 テーブル>

例: JSON の取得

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

---

7. Fetch での非同期/待機の使用

Async/await により、Fetch での Promise の処理が簡素化されます。

例:

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

---

8. Fetch でのエラー処理

XMLHttpRequest とは異なり、Fetch は HTTP エラーの Promise を拒否しません。応答の ok プロパティまたはステータス コードを確認する必要があります。

例:

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log("Response:", data))
  .catch(error => console.error("Error:", error));

---

9.タイムアウトを伴うフェッチ

Fetch はリクエストのタイムアウトをネイティブにサポートしていません。 Promise.race() を使用してタイムアウトを実装できます。

例:

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

---

10.比較: Fetch API と XMLHttpRequest

Feature	Fetch API	XMLHttpRequest
Syntax	Promise-based, simpler, cleaner.	Callback-based, verbose.
Error Handling	Requires manual handling of HTTP errors.	Built-in HTTP error handling.
Streaming	Supports streaming responses.	Limited streaming capabilities.
Modern Features	Works with Promises, async/await.	No built-in Promise support.

機能

---

API を取得

XMLHttpRequest 構文

約束ベース、よりシンプル、クリーン。 コールバックベース、冗長。

エラー処理

HTTP エラーを手動で処理する必要があります。 組み込みの HTTP エラー処理。

ストリーミング

ストリーミング応答をサポートします。 ストリーミング機能が制限されています。

最新の機能

Promise、async/await で動作します。 組み込みの Promise サポートはありません。

---

11. Fetch API を使用する場合

Fetch は、最新の Web 開発プロジェクトに最適です。

Promise および async/await とシームレスに統合されます。
よりクリーンで保守しやすいコードが必要な場合に使用してください。

12.結論 Fetch API は、JavaScript での HTTP リクエストの作成を簡素化し、XMLHttpRequest のより現代的で読みやすい代替手段を提供します。 Promise ベースのアーキテクチャにより、特に async/await と組み合わせた場合、非同期操作に適しています。最新の動的な Web アプリケーションを構築するには、Fetch API を理解することが不可欠です。 こんにちは、アバイ・シン・カタヤットです! 私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。 ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がFetch API をマスターする: JavaScript での HTTP リクエストを簡素化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。