掌握 Fetch API：在 JavaScript 中簡化 HTTP 請求

JavaScript 取得 API

Fetch API 是 JavaScript 中基於承諾的現代接口，用於發出 HTTP 請求。它簡化了從伺服器取得資源的過程，取代了 XMLHttpRequest 等舊方法。 Fetch 提供了一種更清晰、更易讀的方法來處理網路請求和回應，支援 Promises、串流和非同步/等待等功能。

---

1. Fetch API 的主要特點

• 基於 Promise： 提供更優雅的方式來處理非同步操作。
• 簡化的語法：與 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 請求

要將資料傳送到伺服器，請使用具有選項物件中的 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.常見的取得選項

fetch 函數接受一個選項物件來設定請求：

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.

來自 fetch 呼叫的 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.將 Async/Await 與 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.取得中的錯誤處理

與 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 錯誤處理。

串流媒體

支援流式響應。 串流功能有限。

現代特色

與 Promises、async/await 一起使用。 沒有內建的 Promise 支援。 表>

---

11。何時使用 Fetch API

Fetch 是現代 Web 開發專案的理想選擇。

它與 Promises 和 async/await 無縫整合。
當您需要更乾淨且更易於維護的程式碼時使用它。

12。結論 Fetch API 簡化了在 JavaScript 中發出 HTTP 請求，為 XMLHttpRequest 提供了更現代、更易讀的替代方案。憑藉其基於 Promise 的架構，它更適合非同步操作，尤其是與 async/await 配合使用時。了解 Fetch API 對於建立現代動態 Web 應用程式至關重要。 嗨，我是 Abhay Singh Kathayat！ 我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。 請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

以上是掌握 Fetch API：在 JavaScript 中簡化 HTTP 請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！