Fetch API 初步解讀

文 | Leigh，UPYUN 已得到受權
微信文章連接：http://t.cn/R4afStO

在咱們平常的前端開發中，XMLHttpRequest 是必不可少會遇到的一個東東。XHR 最初是由微軟引入其 MSXML 的，Web 開發者須要經過 ActiveX 去調用，然後，Mozilla 開發者開發了一個近似的東西，爲了方便在 JavaScript 中使用，才用 XMLHttpRequest 爲名的對象封裝了一下。使用 XHR 發起一個請求，大體代碼就會以下所示：

以上的代碼，相信每一個前端開發都有寫過，然而就算不寫那一段長長的兼容代碼，光是後面發起請求的那段代碼，也會讓人以爲頭大。就更不用說所謂的 XMLHttpRequest，其實如今幾乎沒人用 XML 作瀏覽器短的數據交互形式了。

儘管衆多三方框架已經封裝了一些好用的 api，例如 jQuery.ajax()，angular.js 的 $http，可是若是有個更簡單的方法呢？

Syntax

fetch() 的語法很簡單，以下所示：

其中：

input 參數，便可以直接傳入一個 url，也能夠傳入一個 Request 對象;

init 參數是可選，是一個包含了請求方法，請求頭部，請求主體，模式，憑證，緩存模式等配置的對象。

從語法中能夠看到，fetch() API 會返回一個 Promise。

所以，開頭所提到的例子，能夠修改爲這樣：

除了普通的 get 請求，發起一個表單 POST 請求也是至關簡單：

同理，若是是 json 格式的數據的話：

響應處理

與上述 Request 對應的，Fetch API 還對應有一個 Response 用於表示響應結果，Response，是一個 Stream 對象，其提供了衆多便利的屬性及方法以供開發者處理。方法通常會返回一個 Promise，舉個例子，處理 json 數據。簡單示例：

這裏，你固然也能夠選擇使用傳統的 JSON.parse()，但無疑，使用 .json() 方法更加方便快捷，適合在 Promise 中使用。

同理，若是你但願處理請求結果爲純文本，那麼 Response.text() 將會頗有幫助。除此以外，還有 .blob(), formData() 等方法可供使用。Fetch API 所支持的響應類型有以下幾種：

• ArrayBuffer

• ArrayBufferView(Uint8Array and friends)

• Blob/File

• String

• URLSearchParams

• FormData

從 Response 的屬性中，咱們也能輕易提取到響應頭部及 Metadata 的相關信息：

其中，response.headers 就是一個 Header 類型的對象，咱們可使用 Headers 類提供的各類方法來操做，除了上面代碼中的 .get() 方法外，Headers 還有 .has() 方法，用於檢查是否包含某個頭部信息；.getAll() 方法，將制定的頭部信息以數組形式所有返回，等等，具體能夠參考 Headers 類型文檔

響應類型

每當咱們用 fetch 發起一個請求，其響應都會被賦予一個響應類型，'basic'，'cors' 或者 'opaque'。

若是請求是同源的，那麼響應類型就是 'basic'，若是跨域的請求，則是 'cors'，若是對非同源的資源發起一個請求，而且其沒有返回 CORS 頭的話，則是 'opaque' 類型。'opaque' 類型的響應咱們將不能讀取所返回的數據或者查看請求的狀態，也就是說，咱們壓根沒辦法知道請求是否成功了。

咱們能夠在發起請求的時候，指定一個模式來確保只有相應的請求會被容許：

• same-origin: 只有同源的請求才會被容許。

• cors: 容許同源或者非同源可是返回正確 CORS 頭部的請求。

• cors-with-forced-preflight: 在正式請求以前，老是先發起一個 preflight 檢查。

• no-cors: 用以發起非同源又沒有返回 CORS 頭的請求。

注意：由於 Cache API 尚未在 window 對象中實現，所以，目前 fetch api 並無支持從 window 域中發起 no-cors 請求，可是你能夠在 Service Worker 中使用。

投入使用

Fetch API 並無徹底完成，所以，瀏覽器對其支持也不徹底，在實際使用的時候還須要注意兼容問題，能夠經過特性檢查，檢查 Headers, Request, Response 或者 fetch 是否存在來判斷瀏覽器的支持狀況。也能夠參考 Can I Use （http://caniuse.com/#feat=fetch）提供的兼容狀況列表。你也可使用 GitHub （https://github.com/github/fetch）提供的 polyfill，他能夠兼容到最低 IE9，相信能夠知足大多數的狀況了。

在將來，Cache API 的實現完成後，Fetch API 將能很好地處理離線狀態下的請求，這應該是你們最期待的特性了。

—— The End ——

本文爲 UPYUN 獨家刊載，做者：Leigh。轉載須註明做者和來源，並保留原文連接。有疑問請聯繫 UPYUN 公衆號（upaiyun）
原文地址：http://zhuli.me/fetch-api-intro/

歡迎關注 UPYUN 微信公衆號，咱們將按期分享高質量的技術乾貨內容