Fetch API 簡介

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

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

Fetch API 的主要特性：

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

安裝

Fetch API 內(nèi)建於現(xiàn)代網(wǎng)頁瀏覽器中，這表示如果您在瀏覽器環(huán)境中工作，則無需安裝任何內(nèi)容。它本身可用並可用於發(fā)出 HTTP 請求。

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

1.使用 npm （適用於 Node.js 環(huán)境）：

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

npm install node-fetch

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

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

使用取得 API

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

文法

fetch(url, [options])

參數(shù)

1. 網(wǎng)址:

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

2. 選項 （可選）：

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

基本獲取請求 (GET)

使用 Fetch API 的基本 GET 要求非常簡單。 fetch() 函數(shù)向提供的 URL 發(fā)出請求並傳回一個使用 Response 物件解析的 Promise。

範(fàn)例程式碼：

這是使用 Fetch API 的簡單 GET 請求的範(fàn)例：

npm install node-fetch

說明：

• fetch() 向給定的 URL 發(fā)起請求。
• .then(response => response.json())：透過解析 JSON 資料將 Response 物件轉(zhuǎn)換為 JavaScript 物件。
• .catch()：捕獲並記錄任何錯誤，例如網(wǎng)路錯誤或失敗的請求。

使用 Fetch 發(fā)出 POST 請求

Fetch API 也允許您發(fā)出 POST 請求。 POST 請求通常用於向伺服器發(fā)送數(shù)據(jù)，例如提交表單或建立新資源。

POST 請求的語法：

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

範(fàn)例程式碼：

以下是向伺服器發(fā)送資料的 POST 請求範(fàn)例：

fetch(url, [options])

說明：

• method: 'POST'：指定這是 POST 請求。
• body: JSON.stringify(postData)：將資料轉(zhuǎn)換為 JSON 字串，然後將其傳送到請求正文中。
• headers：將 Content-Type 標(biāo)頭設(shè)定為 application/json 以指示傳送的資料為 JSON 格式。

處理回應(yīng)資料

Fetch API 傳回的 Response 物件包含多個用於與回應(yīng)資料互動的屬性和方法。

回應(yīng)的關(guān)鍵屬性與方法：

1. response.json()：將回應(yīng)正文解析為 JSON。
2. response.text()：將回應(yīng)正文解析為字串。
3. response.blob()：將回應(yīng)解析為二進(jìn)位大物件（對於處理影像或檔案很有用）。
4. response.ok：一個布林值，指示回應(yīng)狀態(tài)碼是否在 200-299 範(fàn)圍內(nèi)（成功）。
5. response.status：回應(yīng)的 HTTP 狀態(tài)碼（例如，200 表示成功，404 表示未找到）。
6. response.headers：伺服器回應(yīng)請求回傳的標(biāo)頭。

範(fàn)例程式碼：

以下是如何處理不同類型的回應(yīng)資料的範(fàn)例：

npm install node-fetch

說明：

• response.ok 檢查回應(yīng)是否成功（狀態(tài)碼 200-299）。如果沒有，則會拋出錯誤。
• response.json() 被呼叫以將回應(yīng)解析為 JavaScript 物件。

處理取得錯誤

與 XMLHttpRequest 不同，F(xiàn)etch API 不會自動拒絕 HTTP 錯誤狀態(tài)（例如 404 或 500）。只有在發(fā)生網(wǎng)路故障或請求被阻止時才會拒絕。要處理 404 或 500 等錯誤，您需要檢查 response.ok 屬性。

錯誤處理範(fàn)例：

以下是如何在 Fetch 中有效處理錯誤的範(fàn)例：

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

說明：

• response.ok：檢查回應(yīng)狀態(tài)碼是否在 200–299 範(fàn)圍內(nèi)（表示成功）。
• 如果請求失?。ɡ?04或500錯誤），則會拋出錯誤並帶有相應(yīng)的狀態(tài)碼。

結(jié)論

Fetch API 是一個強(qiáng)大的現(xiàn)代工具，用於在 JavaScript 中發(fā)出 HTTP 請求。它提供了一種乾淨(jìng)直覺的方式來使用 REST API，而其基於承諾的架構(gòu)使管理非同步程式碼變得容易。 Fetch 支援所有 HTTP 方法、錯誤處理和回應(yīng)解析，是 Web 開發(fā)人員的必備工具。

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

以上是取得API完整指南的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！