新一代Ajax API --fetch－互聯網

文章出處

之前師傅跟我提過一個新的Ajax API fetch 今天看到一篇關于fetch的文章，受益匪淺。

XMLHttpRequest并不是專為Ajax而設計的，雖然各種框架對XHR的封裝已經足夠好用。但這里介紹的window.fetch 方法更好用，在最新版的Firefox Chrome 中已經提供支持。

fetch的基本使用：

fetch 是全局變量window的一個方法，第一個參數是URL:

和Battery API類似，fetch API也使用了JAvascript Promises來處理結果/回調。

如果你還不習慣 then 方式的寫法，要好好學習一下了，因為很快會全面流行。

自定義請求頭信息極大地增強了請求的靈活性。我們可以通過 new Headers()來創建請求頭：

可以使用的方法包括：append ,has ,get , set ,delete. 需要創建一個Request 對象來包裝請求頭：

下面介紹Response Request 的使用方法：

Request：

Request對象表示一次fetch 調用的請求信息。傳入Request參數來調用fetch,可以執行很多自定義請求的高級用法：

method - 支持GET, POST, PUT, DELETE, HEAD

url - 請求的url

headers - 對應的Headers對象

reference - 請求的referrer 信息

mode - 可以設置 cors, no-cors, same-origin

credentials - 設置cookies是否隨請求一起發送。可以設置：omit, same-origin

integrity - subresource完整性值（integrity value）

cache - 設置cache模式（default, reload, no-cache）

Request的示例如下：

只有第一個參數 URL是必須的，在Request對象創建完成之后，所有的屬性都變為只讀屬性。Request有一個很重要的 clone 方法，特別是在 Service Worker API 中使用時——一個Request就代表一串流（stream）,如果想要傳遞給另一個fetch方法，則需要進行克隆。

fetch 的方法簽名（signature,可理解為配置參數），和Request很像，示例如下：

因為Request 和fetch 的簽名一致所以在Service Workers中，你可能會更喜歡使用Request對象。

Response:

Response 代表響應，fetch 的then 方法接受一個Response實例，當然你也可以手動創建Response對象——比如在 service workers中可能會用到

Response可以配置的參數：

type - 類型，支持：basic, cors

url

useFinalURL - Boolean 值，代表url是否是最終URL

status - 狀態碼（例如：200,404）

ok - Boolean值，代表成功響應（status值在200-299之間）

statusText - 狀態值（例如：OK）

headers - 與響應相關聯的Headers對象

Response 提供的方法如下：

clone() - 創建一個新的Response克隆對象

error() - 返回一個新的，與網絡錯誤相關的Response對象

redirect() - 重定向，使用新的URL創建新的Response對象

arrayBuffer() - Returns a promise that resolves with an ArrayBuffer

blob() - 返回一個promise,resolves是一個Blob

formData() - 返回一個promise, resolves是一個FormData對象

json() - 返回一個promise,resolves是一個JSON對象

text() - 返回一個promise,resolves是一個USVString(text)

處理JSON響應：

假設需要請求JSON——回調結果對象response中有一個json()方法，用來將原始數據轉換成Javascript對象：

當然這很簡單只是封裝了JSON.parse(jsonString)而已，但json方法還是很方便的

處理基本的Text/HTML響應

JSON并不總是理想的請求/響應數據格式，那么我們看看如何處理HTML或文本結果：

如上面的代碼所示，可以在Promise鏈式的then方法中，先返回text()結果，再獲取text

處理Blob結果：

如果你想通過fetch加載圖像或者其他二進制數據，則會略不同：

響應 Body mixin 的blob()方法處理響應流（Response stream）,并且將其讀完

另一種常用的AJAX調用是提交表單數據--示例如下：

1    fetch('/submit',{ 
2         method: 'post',
3         body:new FormData(document.getElementById);
4   });

提交JSON的示例如下：

1  fetch('/submit-json',{
2         method:'post',
3         body:JSON.stringify({
4                 email:document.getElementById('email');
5                 answer:document.getElementById('answer');
6       })
7   );