開始學(xué)習(xí)Fetch API

Fetch API 提供了一個(gè)獲取資源的接口（包括通過網(wǎng)絡(luò)）。任何使用過 XMLHttpRequest 的人都會(huì)覺得很熟悉，但Fetch API 提供了一個(gè)更強(qiáng)大和更靈活的功能集。

Fetch API 概念和用法

Fetch提供了Request和Response對(duì)象（以及涉及網(wǎng)絡(luò)請(qǐng)求的其他內(nèi)容）的通用的定義。這將允許他們?cè)趯?lái)需要的地方使用，無(wú)論是service worker，Cache API 和其他類似的事情，處理或修改請(qǐng)求和響應(yīng)，或任何類型的用例，可能需要您產(chǎn)生自己的響應(yīng)編程。

它還為CORS和HTTP源頭語(yǔ)義等相關(guān)概念提供了定義，取代了其他地方的單獨(dú)定義。

為了提出請(qǐng)求并獲取資源，請(qǐng)使用該GlobalFetch.fetch方法。它在多個(gè)接口實(shí)現(xiàn)的，特別是Window和WorkerGlobalScope。這使得它幾乎可以在任何你想要獲取資源的上下文中使用。

該 fetch() 方法采用一個(gè)強(qiáng)制參數(shù)，即要獲取的資源的路徑。它返回一個(gè)promise，它解決了對(duì)該請(qǐng)求的Response，無(wú)論是否成功。您也可以選擇傳遞一個(gè)init選項(xiàng)對(duì)象作為第二個(gè)參數(shù)。

一旦檢索到Response，就有很多方法可以定義正文內(nèi)容以及應(yīng)該如何處理。

您可以使用Request()和Response()構(gòu)造函數(shù)直接創(chuàng)建請(qǐng)求和響應(yīng)，但是您不太可能直接執(zhí)行此操作。相反，這些更有可能被創(chuàng)建為其他API操作的結(jié)果（例如，來(lái)自service worker的FetchEvent.respondWith）。

注意：了解有關(guān)使用 fetch 中的Fetch API 功能的更多信息，并在 Fetch 基本概念中學(xué)習(xí)概念。

中止 Fetch

瀏覽器已經(jīng)開始為 AbortController 和 AbortSignal 接口（又名Abort API）添加實(shí)驗(yàn)支持，允許像 Fetch 和 XHR 操作，如果他們尚未完成將被中止。

Fetch 接口

GlobalFetch

包含用于獲取資源的fetch()方法。

Headers

表示響應(yīng)/請(qǐng)求標(biāo)題，允許您查詢它們并根據(jù)結(jié)果采取不同的操作。

Request

代表資源請(qǐng)求。

Response

表示對(duì)請(qǐng)求的響應(yīng)。

Fetch mixin

Body

提供與響應(yīng)/請(qǐng)求主體相關(guān)的方法，允許您聲明其內(nèi)容類型以及應(yīng)該如何處理。

規(guī)范

瀏覽器兼容性

• 電腦端

• 移動(dòng)端

表格中的角標(biāo)解釋：

[1]這個(gè)API是在首選項(xiàng)后面實(shí)現(xiàn)的。

[2]在Firefox 52之前，get()只返回指定頭文件中的第一個(gè)值，getAll()返回所有的值。從52開始，get()現(xiàn)在返回所有值，并getAll()已被刪除。

[3]可讀流目前在Firefox中啟用，但隱藏在dom.streams.enabled和javascript.options.streamsprefs 后面。