取得API完整指南

Fetch API 簡介

Fetch API 是一種現代的原生 JavaScript API，可讓您以簡單且靈活的方式發出 HTTP 請求。它為 XMLHttpRequest 等舊技術提供了更簡單、更乾淨的替代方案。 Fetch 是基於 Promise 的，這意味著它可以很好地與現代 JavaScript 功能（例如 async/await 和 .then() 連結）配合使用。

Fetch API 提供了一種易於理解的與 RESTful API 互動的方式，可以處理簡單和複雜的請求。它在現代瀏覽器中得到廣泛支持，是 Web 開發的常用工具。

Fetch API 的主要特性：

1. 基於 Promise：基於 Promise 構建，提供一種簡單直觀的方式來管理非同步程式碼。
2. 支援所有 HTTP 方法：GET、POST、PUT、DELETE、PATCH 等
3. 沒有回調地獄：感謝 Promises，它避免了嵌套回調。
4. 串流支援：Fetch 支援流，這使得它適合高效處理大量資料。
5. 改進的錯誤處理：與 XMLHttpRequest 不同，Fetch API 不會拒絕 HTTP 錯誤狀態（例如 404 或 500）。你必須手動處理這些。

安裝

Fetch API 內建於現代網頁瀏覽器中，這表示如果您在瀏覽器環境中工作，則無需安裝任何內容。它本身可用並可用於發出 HTTP 請求。

但是，如果您在 Node.js 環境中工作（原生不支援 fetch），則可以安裝諸如 node-fetch 之類的 polyfill。

1.使用 npm （適用於 Node.js 環境）：

如果您在 Node.js 環境中工作並且需要使用 Fetch，您可以安裝 node-fetch：

npm install node-fetch

然後，將其匯入到您的專案中：

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

使用取得 API

Fetch API 提供了一個全域 fetch() 函數，您可以使用它來發出 HTTP 請求。此函數傳回一個 Promise，該 Promise 解析為表示對請求的回應的 Response 物件。

文法

fetch(url, [options])

參數

1. 網址:

   • 型別：字串
   • 描述：請求傳送到的 URL。這可以是完整 URL 或基於請求中定義的基本 URL 的相對 URL。

2. 選項 （可選）：

   • 類型：對象
   • 描述：用於修改請求的選用設定物件。一些常見的選項包括：
     • 方法：HTTP 方法（例如 GET、POST、PUT、DELETE）。
     • headers：要包含在請求中的自訂標頭（例如，內容類型、授權）。
     • body：請求正文（僅適用於 POST 或 PUT 等方法）。
     • mode：控制跨域請求。 （例如，「cors」、「no-cors」、「同源」）。
     • cache：指定請求如何與快取互動（例如，「no-store」、「reload」）。
     • 憑證：控制 cookie 和身份驗證（例如，「同源」、「包含」）。

基本獲取請求 (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])

說明：

• method: '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，而其基於承諾的架構使管理非同步程式碼變得容易。 Fetch 支援所有 HTTP 方法、錯誤處理和回應解析，是 Web 開發人員的必備工具。

無論您是獲取資料、提交表單還是處理身份驗證，Fetch API 都可以提供對 HTTP 請求的靈活性和控制，使其成為現代 Web 應用程式的絕佳選擇。

以上是取得API完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！