Fetch API 簡(jiǎn)介

Fetch API 是一種現(xiàn)代的原生 JavaScript API，允許您以簡(jiǎn)單靈活的方式發(fā)出 HTTP 請(qǐng)求。它為 XMLHttpRequest 等舊技術(shù)提供了更簡(jiǎn)單、更干凈的替代方案。 Fetch 是基于 Promise 的，這意味著它可以很好地與現(xiàn)代 JavaScript 功能（例如 async/await 和 .then() 鏈接）配合使用。

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

Fetch API 的主要特性：

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

安裝

Fetch API 內(nèi)置于現(xiàn)代網(wǎng)絡(luò)瀏覽器中，這意味著如果您在瀏覽器環(huán)境中工作，則無(wú)需安裝任何內(nèi)容。它本身可用并可用于發(fā)出 HTTP 請(qǐng)求。

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

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

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

npm install node-fetch

然后，將其導(dǎo)入到您的項(xiàng)目中：

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

使用獲取 API

Fetch API 提供了一個(gè)全局 fetch() 函數(shù)，您可以使用它來(lái)發(fā)出 HTTP 請(qǐng)求。此函數(shù)返回一個(gè) Promise，該 Promise 解析為表示對(duì)請(qǐng)求的響應(yīng)的 Response 對(duì)象。

語(yǔ)法

fetch(url, [options])

參數(shù)

1. 網(wǎng)址:

   • 類(lèi)型：字符串
   • 描述：請(qǐng)求發(fā)送到的 URL。這可以是完整 URL 或基于請(qǐng)求中定義的基本 URL 的相對(duì) URL。

2. 選項(xiàng) （可選）：

   • 類(lèi)型：對(duì)象
   • 描述：用于修改請(qǐng)求的可選配置對(duì)象。一些常見(jiàn)的選項(xiàng)包括：
     • 方法：HTTP 方法（例如 GET、POST、PUT、DELETE）。
     • headers：要包含在請(qǐng)求中的自定義標(biāo)頭（例如，內(nèi)容類(lèi)型、授權(quán)）。
     • body：請(qǐng)求正文（僅適用于 POST 或 PUT 等方法）。
     • mode：控制跨域請(qǐng)求。 （例如，“cors”、“no-cors”、“同源”）。
     • cache：指定請(qǐng)求如何與緩存交互（例如，“no-store”、“reload”）。
     • 憑證：控制 cookie 和身份驗(yàn)證（例如，“同源”、“包含”）。

基本獲取請(qǐng)求 (GET)

使用 Fetch API 的基本 GET 請(qǐng)求非常簡(jiǎn)單。 fetch() 函數(shù)向提供的 URL 發(fā)出請(qǐng)求并返回一個(gè)使用 Response 對(duì)象解析的 Promise。

示例代碼：

這是使用 Fetch API 的簡(jiǎn)單 GET 請(qǐng)求的示例：

npm install node-fetch

說(shuō)明：

• fetch() 向給定的 URL 發(fā)起請(qǐng)求。
• .then(response => response.json())：通過(guò)解析 JSON 數(shù)據(jù)將 Response 對(duì)象轉(zhuǎn)換為 JavaScript 對(duì)象。
• .catch()：捕獲并記錄任何錯(cuò)誤，例如網(wǎng)絡(luò)錯(cuò)誤或失敗的請(qǐng)求。

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

Fetch API 還允許您發(fā)出 POST 請(qǐng)求。 POST 請(qǐng)求通常用于向服務(wù)器發(fā)送數(shù)據(jù)，例如提交表單或創(chuàng)建新資源。

POST 請(qǐng)求的語(yǔ)法：

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

示例代碼：

以下是向服務(wù)器發(fā)送數(shù)據(jù)的 POST 請(qǐng)求示例：

fetch(url, [options])

說(shuō)明：

• method: 'POST'：指定這是一個(gè) POST 請(qǐng)求。
• body: JSON.stringify(postData)：將數(shù)據(jù)轉(zhuǎn)換為 JSON 字符串，然后將其發(fā)送到請(qǐng)求正文中。
• headers：將 Content-Type 標(biāo)頭設(shè)置為 application/json 以指示發(fā)送的數(shù)據(jù)為 JSON 格式。

處理響應(yīng)數(shù)據(jù)

Fetch API 返回的 Response 對(duì)象包含多個(gè)用于與響應(yīng)數(shù)據(jù)交互的屬性和方法。

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

1. response.json()：將響應(yīng)正文解析為 JSON。
2. response.text()：將響應(yīng)正文解析為字符串。
3. response.blob()：將響應(yīng)解析為二進(jìn)制大對(duì)象（對(duì)于處理圖像或文件很有用）。
4. response.ok：一個(gè)布爾值，指示響應(yīng)狀態(tài)代碼是否在 200-299 范圍內(nèi)（成功）。
5. response.status：響應(yīng)的 HTTP 狀態(tài)代碼（例如，200 表示成功，404 表示未找到）。
6. response.headers：服務(wù)器響應(yīng)請(qǐng)求返回的標(biāo)頭。

示例代碼：

以下是如何處理不同類(lèi)型的響應(yīng)數(shù)據(jù)的示例：

npm install node-fetch

說(shuō)明：

• response.ok 檢查響應(yīng)是否成功（狀態(tài)代碼 200-299）。如果沒(méi)有，則會(huì)拋出錯(cuò)誤。
• response.json() 被調(diào)用以將響應(yīng)解析為 JavaScript 對(duì)象。

處理獲取錯(cuò)誤

與 XMLHttpRequest 不同，F(xiàn)etch API 不會(huì)自動(dòng)拒絕 HTTP 錯(cuò)誤狀態(tài)（例如 404 或 500）。僅當(dāng)出現(xiàn)網(wǎng)絡(luò)故障或請(qǐng)求被阻止時(shí)才會(huì)拒絕。要處理 404 或 500 等錯(cuò)誤，您需要檢查 response.ok 屬性。

錯(cuò)誤處理示例：

以下是如何在 Fetch 中有效處理錯(cuò)誤的示例：

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

說(shuō)明：

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

結(jié)論

Fetch API 是一個(gè)強(qiáng)大的現(xiàn)代工具，用于在 JavaScript 中發(fā)出 HTTP 請(qǐng)求。它提供了一種干凈直觀的方式來(lái)使用 REST API，并且其基于承諾的架構(gòu)使管理異步代碼變得容易。 Fetch 支持所有 HTTP 方法、錯(cuò)誤處理和響應(yīng)解析，是 Web 開(kāi)發(fā)人員的必備工具。

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

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