話說Fetch這個API

最近在研究react這個框架，成功的成為了一名新的入坑著。用過react的都知道react的強大主要是在於它的生態的強大，react說的再大不過也就是乙個ui框架罷了。不過我們學習react也主要因為這個生態，有facebook支援，質量相對有保障，衍生出的react-native, react-canvas等輪子在很多場景下可以直接拿來用。碎片化是react當前的狀態，比如flux庫，promise庫，utils函式庫，dom操作庫，ajax庫等等，每個點都有2-3個庫在開源社群處於競爭狀態，各有所長，大家根據自身的需要去選擇。而我打算用fetch作為ajax庫來擺脫jquery這個千年不變的大殺器。

我們一提到區域性重新整理，前後端互動，非同步載入等首先想到的ajax，好像在我們的認知中除了ajax就沒有別的了。其實我們都被這種觀念誤導了，ajax只是對於xmlhttprequest的一種封裝，我們談及ajax技術的時候，通常意思就是基於xmlhttprequest的ajax，它是一種能夠有效改進頁面通訊的技術。而fetch api則是xmlhttprequest的最新替代技術，它是w3c的正式標準。

下面我們看一下fetch的相容性

總體來說，最新的瀏覽器都開始慢慢的相容它了，但是想讓它獨立的用於前端專案還是任重而道遠啊。。。

如果你想獨立在前端專案中相容fetch，可以考慮看這篇文章使用fetch遇到過的坑但是我不推薦去自己部署fetch。

我是在react專案中了解到fetch的,使用的包是:whatwg-fetch

前面說了那麼多，身為吃瓜群眾的我們就是好奇：那他有什麼優點能讓顛覆了整個前端行業的ajax退位讓賢呢？

xmlhttprequest 是乙個設計粗糙的 api，不符合關注分離（separation of concerns）的原則，配置和呼叫方式非常混亂，而且基於事件的非同步模型寫起來也沒有現代的 promise，generator/yield，async/await 友好。

fetch 的出現就是為了解決 xhr 的問題，拿例子說明：

使用 xhr 傳送乙個 json 請求一般是這樣：

使用 fetch 後，頓時看起來好一點(其實jquery的ajax也實現了promise)

fetch(url).then(function(response) ).then(function(data) ).catch(function(e) );

使用 es6 的箭頭函式後：

fetch(url).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("oops, error", e))

現在看起來好很多了，但這種 promise 的寫法還是有 callback 的影子，而且 promise 使用 catch 方法來進行錯誤處理的方式有點奇怪。不用急，下面使用 async/await 來做最終優化：

注：async/await 是非常新的 api，屬於 es7，目前尚在 stage 1(提議) 階段，這是它的完整規範。使用 babel 開啟 runtime 模式後可以把 async/await **編譯成 es5 **。也可以直接使用 regenerator 來編譯到 es5。

try catch(e) // 注：這段**如果想執行，外面需要包乙個 async function

duang~ 的一聲，使用 await 後，寫非同步**就像寫同步**一樣爽。await 後面可以跟 promise 物件，表示等待 promise resolve() 才會繼續向下執行，如果 promise 被 reject() 或丟擲異常則會被外面的 try...catch 捕獲。

promise，generator/yield，await/async 都是現在和未來 js 解決非同步的標準做法，可以完美搭配使用。這也是使用標準 promise 一大好處。最近也把專案中使用第三方 promise 庫的**全部轉成標準 promise，為以後全面

使用 async/await 做準備。

以上資料來自傳統 ajax 已死，fetch 永生

但是我認為fetch最不同於ajax的是讓我們對於請求頭的設定更加方便，更加靈活。

對於傳統的xmlhttprequest而言，你必須使用它的乙個例項來執行請求和檢索返回的響應。但是通過fetch api，我們還能夠明確的配置請求物件。你可以通過request構造器函式建立乙個新的請求物件，這也是建議標準的一部分。第乙個引數是請求的url，第二個引數是乙個選項物件，用於配置請求。請求物件一旦建立了，你便可以將所建立的物件傳遞給fetch()方法，用於替代預設的url字串。示例**如下：

var req = new request(url, );
fetch(req).then(function(response) ).then(function(json) );

上面的**中我們指明了請求使用的方法為get，並且指定不快取響應的結果。

有關request物件的另一件更酷的事在於，你還可以基於原有的物件建立乙個新的物件。新的請求和舊的並沒有什麼不同，但你可以通過稍微調整配置物件，將其用於不同的場景。例如，你可以基於原有的get請求建立乙個post請求，它們具有相同的請求源。**如下：

// 基於req物件建立新的postreq物件
var postreq = new request(req, );

每個request物件都有乙個header屬性，在fetch api中它對應了乙個headers物件。通過headers物件，你能夠修改請求頭。不僅如此，對於返回的響應，你還能輕鬆的返回響應頭中的各個屬性。但是需要注意的是，響應頭是唯讀的。

var headers = new headers();
var request = new request(url, );
fetch(request).then(function(response) );

在上面的**中，你可以通過headers構造器來獲取這個物件，用於為新的request物件配置請求頭。

相似的，你可以建立乙個response物件：

function responsedemo() );
var response = new response(
json.stringify(}),
);response.json().then(function(json) );
}

request和response都完全遵循http標準。

以上資料來自深入淺出fetch api

話說Fetch這個API

如何做好公益？這個品牌有話說

fetch學習筆記

Fetch封裝方法

話說Fetch這個API

如何做好公益？這個品牌有話說

fetch學習筆記

Fetch封裝方法

相關推薦