Fetch-新一代Ajax API

AJAX半遮半掩的底層API是飽受詬病的一件事情.  XMLHttpRequest 並不是專為Ajax而設計的. 雖然各種框架對  XHR 的封裝已經足夠好用, 但我們可以做得更好。

window.fetch 方法, 在最新版的 Firefox 和 Chrome 中已經提供支持。

1.語法簡潔，更加語義化

2.基於標准 Promise 實現，支持 async/await

3.同構方便，使用 isomorphic-fetch

// url (必須), options (可選)
fetch('/some/url', {
    method: 'get'
}).then(function(response) {

}).catch(function(err) {
    //中途任何地方出錯...在此處理
 :(
});

//使用 ES6 的 箭頭函數 后：
fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

fetch API 也使用了 JavaScript Promises 來處理結果/回調。自定義請求頭信息極大地增強了請求的靈活性。我們可以通過  new Headers() 來創建請求頭

// 創建一個空的 Headers 對象,注意是Headers，不是Header
var headers = new Headers();

// 添加(append)請求頭信息
headers.append('Content-Type', 'text/plain');
headers.append('X-My-Custom-Header', 'CustomValue');

// 判斷(has), 獲取(get), 以及修改(set)請求頭的值
headers.has('Content-Type'); // true
headers.get('Content-Type'); // "text/plain"
headers.set('Content-Type', 'application/json');

// 刪除某條請求頭信息(a header)
headers.delete('X-My-Custom-Header');

// 創建對象時設置初始化信息
var headers = new Headers({
    'Content-Type': 'text/plain',
    'X-My-Custom-Header': 'CustomValue'
})

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

• method - 支持 GET, POST, PUT, DELETE, HEAD
• url - 請求的 URL
• headers - 對應的 Headers 對象
• referrer - 請求的 referrer 信息
• mode - 可以設置 cors, no-cors, same-origin
• credentials - 設置 cookies 是否隨請求一起發送。可以設置: omit, same-origin
• redirect - follow, error, manual
• integrity - subresource 完整性值(integrity value)
• cache - 設置 cache 模式 (default, reload, no-cache)

Request 的示例如下:

var request = new Request('/users.json', {
    method: 'POST', 
    mode: 'cors', 
    redirect: 'follow',
    headers: new Headers({
        'Content-Type': 'text/plain'
    })
});

// 使用!
fetch(request).then(function() { /* handle response */ });

只有第一個參數 URL 是必需的。在 Request 對象創建完成之后, 所有的屬性都變為只讀屬性. 請注意, Request有一個很重要的 clone 方法, 特別是在 Service Worker API 中使用時 —— 一個 Request 就代表一串流(stream), 如果想要傳遞給另一個 fetch 方法,則需要進行克隆。因為 Request 和 fetch 的簽名一致, 所以在 Service Workers 中, 你可能會更喜歡使用 Request 對象。

Response 代表響應, fetch 的 then 方法接收一個 Response 實例, 當然你也可以手動創建 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).

1.JSON格式

fetch('http://jartto.wang/test.json')
.then(function(response) {
// Convert to JSON
return response.json();
})
.then(function(result) {
console.log(result);
});

2.返回HTML/text

fetch('/next/page')
.then(function(response) {
return response.text();
}).then(function(text) {
// <!DOCTYPE ....
console.log(text);
});

3.發送form表單數據

//form data
var form = document.querySelector('form');
fetch('http://jartto.wang/submit', {
method: 'post',
body: new FormData(form)
});
//JSON
fetch('http://jartto.wang/submit-json', {
method: 'post',
body: JSON.stringify({
name: 'jartto',
blog: 'http://jartto.wang'
})
});

4.圖片的處理

fetch('http://jartto.wang/logo.png')
.then(function(response) {
return response.blob();
})
.then(function(imageBlob) {
document.querySelector('img').src = URL.createObjectURL(imageBlob);
});

缺點

1.不可以取消：Ajax調用XMLHttpRequest對象上的abort方法，但是Fetch好像沒啥辦法。

2.瀏覽器支持：瀏覽器支持不是很好，但是我們可以用window.fetch polyfill來處理兼容問題。瀏覽器支持情況大致如下：

- Chrome 
- Firefox 
- Safari 6.1+ 
- Internet Explorer 10+

 最近把阿里一個千萬級 PV 的數據產品全部由 jQuery 的  $.ajax 遷移到  Fetch，上線一個多月以來運行非常穩定。結果證明，對於 IE8+ 以上瀏覽器，在生產環境使用 Fetch 是可行的。

 

參考：

http://jartto.wang/2017/01/17/xhr-or-fetch-api/

https://segmentfault.com/a/1190000003810652