資訊專欄INFORMATION COLUMN
摘要：后面可以跟對象，表示等待才會繼續(xù)下去執(zhí)行，如果被或拋出異常則會被外面的捕獲。沒有獲取狀態(tài)方法，標(biāo)準(zhǔn)沒有提供獲取當(dāng)前狀態(tài)或者的方法。只允許外部傳入成功或失敗后的回調(diào)。這種進度通知的功能還沒有用過，暫不知道如何替代。
始終不是很懂fetch的作用，然后查了很多資料，看了一篇不錯的文章，結(jié)合自己之前學(xué)習(xí)的Promise，然后做一篇文章，稍微記錄一下。
傳統(tǒng) Ajax 已死，F(xiàn)etch 永生
雖然標(biāo)題感覺比較大，然后指出了XMLHttpRequest的局限性。XMLHttpRequest是一個設(shè)計粗糙的API，不符合關(guān)注分離的原則，配置和調(diào)用方式也很混亂，而且基于事件的異步模式?jīng)]有Promise友好。雖然我也沒有覺得這樣的理由足夠強大到可以把Ajax逼死，但是畢竟流行是一種趨勢。隨著ES6時代的全面爆發(fā)，相信fetch的時代也將不會很遠(yuǎn)了。
現(xiàn)在來比較為了發(fā)起一個異步請求，兩種寫法的區(qū)別。
fetch的好處用XHR發(fā)送一個json請求一般是這樣的：
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "json";
xhr.onload = function(){
console.log(xhr.response);
};
xhr.onerror = function(){
console.log("error")
}
xhr.send();
用fetch實現(xiàn)的方式：
fetch(url).then(function(response){
return response.json();
}).then(function(data){
console.log(data)
}).catch(function(e){
console.log("error")
})
使用ES6的箭頭函數(shù)后
fetch(url).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("error"))
也可以用async/await的方式
try{
let response = await fetch(url);
let data = await response.json();
console.log(data);
} catch(e){
console.log("error")
}
用了await后，寫異步代碼感覺像同步代碼一樣爽。await后面可以跟Promise對象，表示等待Promise resolve()才會繼續(xù)下去執(zhí)行，如果Promise被reject()或拋出異常則會被外面的try...catch捕獲。
fetch的主要優(yōu)點是
語法簡潔，更加語義化
基于標(biāo)準(zhǔn)的Promise實現(xiàn)，支持async/await
同構(gòu)方便
但是也有它的不足
fetch請求默認(rèn)是不帶cookie的，需要設(shè)置fetch(url, {credentials: "include"})
服務(wù)器返回400,500這樣的錯誤碼時不會reject,只有網(wǎng)絡(luò)錯誤這些導(dǎo)致請求不能完成時，fetch才會被reject.
另外fetch的不足來自Promise 沒有 DeferredDeferred 可以在創(chuàng)建 Promise 時可以減少一層嵌套，還有就是跨方法使用時很方便。
ECMAScript 11 年就有過 Deferred 提案，但后來沒被接受。其實用 Promise 不到十行代碼就能實現(xiàn) Deferred：es6-deferred。現(xiàn)在有了 async/await，generator/yield 后，deferred 就沒有使用價值了。
標(biāo)準(zhǔn) Promise 沒有提供獲取當(dāng)前狀態(tài) rejected 或者 resolved 的方法。只允許外部傳入成功或失敗后的回調(diào)。我認(rèn)為這其實是優(yōu)點，這是一種聲明式的接口，更簡單。
缺少其它一些方法：always，progress，finally
always 可以通過在 then 和 catch 里重復(fù)調(diào)用方法實現(xiàn)。finally 也類似。progress 這種進度通知的功能還沒有用過，暫不知道如何替代。
不能中斷，沒有 abort、terminate、onTimeout 或 cancel 方法Fetch 和 Promise 一樣，一旦發(fā)起，不能中斷，也不會超時，只能等待被 resolve 或 reject。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81950.html
摘要：是基于進行實現(xiàn)的對應(yīng)兼容包兼容服務(wù)的兼容中的這個不用解釋了吧轉(zhuǎn)換為，要和對象中的保持一致，調(diào)用對應(yīng)的返回一個對象以上代碼的解釋該值代表中是否攜帶到服務(wù)器端默認(rèn)值，不攜帶到服務(wù)器允許從當(dāng)前域下攜帶到服務(wù)器端，相對應(yīng)服務(wù)器端的 fetch是基于promise進行實現(xiàn)的對應(yīng)npm兼容包： node-fetch //兼容node服務(wù)的fetch ...
摘要：在某些不定長度的列表操作上，惰性列表會讓代碼和結(jié)構(gòu)更靈活。方法本身是立即執(zhí)行的，如果滿足條件，這里的方法會執(zhí)行兩次。結(jié)語和是帶給我們的非常強大的語言層面的能力，它本身的求值可以看作是惰性的。 初識 Lazy List 如果有了解過 Haskell 的朋友，對下面的這些表達一定不陌生 repeat 1 -- => [1, 1, 1, 1, 1,...] cycle abc -- => a...
摘要：初始值，優(yōu)先級低于傳給的，如下此時，在后為以格式定義。用于處理同步操作，唯一可以修改的地方。由觸發(fā)，可以觸發(fā)，可以和服務(wù)器交互，可以獲取全局的數(shù)據(jù)等等。取消注冊，清理和。如果沒有返回函數(shù)，使用會給予警告注冊路由表。 前言 dva 首先是一個基于 redux 和 redux-saga 的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗，dva 還額外內(nèi)置了 react-router 和 fetch，所以...
摘要：原文高階函數(shù)在中高階函數(shù)實際上就是控制函數(shù)的函數(shù)，有別于普通函數(shù)傳遞變量，高階函數(shù)傳遞的是函數(shù)，并且輸出函數(shù)這對于初學(xué)者來說足夠燒腦，也足夠驚艷。初識時常常會被被震撼了，原來函數(shù)還可以這么用這是設(shè)計模式與開發(fā)實踐的單例模式的一個高階函數(shù)。 原文 高階函數(shù) 在javascript中高階函數(shù)實際上就是控制函數(shù)的函數(shù)，有別于普通函數(shù)傳遞變量，高階函數(shù)傳遞的是函數(shù)，并且輸出函數(shù) 這對于js初學(xué)...
摘要：無論請求成功與否，它都返回一個對象，對應(yīng)請求的?？蛇x一個配置項對象，包括所有對請求的設(shè)置。注意或方法的請求不能包含信息。只讀請求所關(guān)聯(lián)的對象。使用一個對象來讀取流中的數(shù)據(jù)，并將狀態(tài)改為已使用。 fetch初識 此功能某些瀏覽器尚在開發(fā)中，請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應(yīng)的標(biāo)準(zhǔn)文檔可能被重新修訂，所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改...
閱讀 3664·2021-09-22 15:15
閱讀 3567·2021-08-12 13:24
閱讀 1314·2019-08-30 15:53
閱讀 1826·2019-08-30 15:43
閱讀 1189·2019-08-29 17:04
閱讀 2798·2019-08-29 15:08
閱讀 1586·2019-08-29 13:13
閱讀 3091·2019-08-29 11:06
