如何利用Promises編寫更優(yōu)雅的JavaScript代碼
你可能已經(jīng)無意中聽說過 Promises,很多人都在討論它,使用它,但你不知道為什么它們?nèi)绱颂貏e。難道你不能使用回調(diào)么?有什么了特別的?在本文中,我們一起來看看 Promises 是什么以及如何使用它們寫出更優(yōu)雅的 JavaScript 代碼。
Promises 易于閱讀
比如說我們想從 HipsterJesus 的API中抓取一些數(shù)據(jù)并將這些數(shù)據(jù)添加到我們的頁面中。這些 API 的響應(yīng)數(shù)據(jù)形式如下:
{ "text": "<p>Lorem ipsum...</p>", "params": { "paras": 4, "type": "hipster-latin" }}
要使用回調(diào)的話,我們通常要寫如下形式的東西:
$.getJSON('http://hipsterjesus.com/api/', function(data) { $('body').append(data.text); });
如果你有 jQuery 的使用經(jīng)歷,你會認出我們創(chuàng)建了一個 GET 請求并且希望響應(yīng)內(nèi)容是 JSON。我們還傳遞了一個回調(diào)函數(shù)來接受響應(yīng)的 JSON,以將數(shù)據(jù)添加到文檔中。
另外一種書寫方法是使用 getJSON 方法返回的 promise 對象。你可以直接在這個返回對象上綁定一個回調(diào)。
var promise = $.getJSON('http://hipsterjesus.com/api/');promise.done(function(data) { $('body').append(data.text); });
在上面的回調(diào)例子中,當(dāng)響應(yīng)成功時它將 API 請求的結(jié)果添加到文檔中。但當(dāng)響應(yīng)失敗是會發(fā)生什么呢?我們可以在我們的 promise 上綁定一個失敗處理器。
var promise = $.getJSON('http://hipsterjesus.com/api/');promise.done(function(data) { $('body').append(data.text);});promise.fail(function() { $('body').append('<p>Oh no, something went wrong!</p>'); });
大多數(shù)人刪掉了 promise 變量,這樣更簡潔,一眼就能看出代碼的作用。
$.getJSON('http://hipsterjesus.com/api/').done(function(data) { $('body').append(data.text);}).fail(function() { $('body').append('<p>Oh no, something went wrong!</p>'); });
jQuery 也包含一個一直發(fā)生的事件處理器,不論請求成功失敗都會被調(diào)用。
$.getJSON('http://hipsterjesus.com/api/').done(function(data) { $('body').append(data.text);}).fail(function() { $('body').append('<p>Oh no, something went wrong!</p>');}).always(function() { $('body').append('<p>I promise this will always be added!.</p>'); });
通過使用promise,回調(diào)的順序是按預(yù)期的。我們能確保正?;卣{(diào)先被調(diào)用,然后是失敗回調(diào),最后是一直發(fā)生的回調(diào)。
更好的 API
比如說我們想創(chuàng)造一個 HipsterJesus API 的封裝對象。我們會添加一個方法——html,它將來自 API 的 HTML 數(shù)據(jù)返回。與之前設(shè)置一個回調(diào)處理器來解析請求不同,我們可以讓方法返回一個 promise 對象。
var hipsterJesus = { html: function() { return $.getJSON('http://hipsterjesus.com/api/').then(function(data) { return data.text; }); }};
這個做法很酷,這樣我們可以繞過 promise 對象而不必擔(dān)心何時或如何解析它的值。任何需要 promise 返回值的代碼只需注冊一個成功響應(yīng)回調(diào)即可。
then方法允許我們修改promise的結(jié)果并將其傳遞給鏈中的下一個處理器。這意味現(xiàn)在我們可以這樣使用新的API:
hipsterJesus.html().done(function(html) { $("body").append(html); });
直到最近,AngularJS 出現(xiàn)了一個殺手級特性,模板可以直接綁定到promise。在Angular的控制器中,像這樣:
$scope.hipsterIpsum = $http.get('http://hipsterjesus.com/api/');
這樣,在模板中寫 {{ hipsterIpsum.text }} 就很簡單了。當(dāng) promise 解析后,Angular 不需要自動更新視圖。不幸的是 Angular 團隊已經(jīng)放棄了這一特性。現(xiàn)在,它可以通過調(diào)用 $parseProvider.unwrapPromises(true) 來啟用。我希望Angular已經(jīng)其他框架一直包含此特性(我會一直留意)。
鏈?zhǔn)秸{(diào)用
Promise 最出彩的部分是你可以將它們串聯(lián)起來。比如說我們想添加一個方法到一個返回一段數(shù)組的 API。
var hipsterJesus = { html: function() { return $.getJSON('http://hipsterjesus.com/api/').then(function(data) { return data.text; }); }, paragraphs: function() { return this.html().then(function(html) { return html.replace(/<[^>]+>/g, "").split(""); }); }};
我們以上面的方式這種 HTML 方法,我們用它在 paragraphs 方法中。因為promise回調(diào)函數(shù)的返回值將傳遞給鏈中的下一個回調(diào),我們能夠在通過它們時自由地創(chuàng)建小的、功能性的方法來改變數(shù)據(jù)。
我們可以按需求任意次串聯(lián)promise。讓我們添加一個。
var hipsterJesus = { html: function() { return $.getJSON('http://hipsterjesus.com/api/').then(function(data) { return data.text; }); }, paragraphs: function() { return this.html().then(function(html) { return html.replace(/<[^>]+>/g, "").split(""); }); }, sentences: function() { return this.paragraphs().then(function(paragraphs) { return [].concat.apply([], paragraphs.map(function(paragraph) { return paragraph.split(/. /); })); }); }};
多個調(diào)用
可能 promise 最顯著的特點是調(diào)用多個 API 的能力。當(dāng)使用回調(diào)時,如果你需要同時創(chuàng)建兩個API調(diào)用時會發(fā)生什么呢?你可能會這樣寫:
var firstData = null;var secondData = null;var responseCallback = function() { if (!firstData || !secondData) return; // do something}$.get("http://example.com/first", function(data) { firstData = data; responseCallback();});$.get("http://example.com/second", function(data) { secondData = data; responseCallback(); });
使用 promise 的話,這就簡單多了:
var firstPromise = $.get("http://example.com/first"); var secondPromise = $.get("http://example.com/second"); $.when(firstPromise, secondPromise).done(function(firstData, secondData) { // do something });
這里我們使用 when 方法,將其綁定到一個供兩個請求都完成時調(diào)用的處理器上。
結(jié)論
這就是 Promise。希望你馬上就想到一些可以用 Promise 實現(xiàn)的的可怕的事情。你最喜歡使用它們的方式是什么?在評論中告訴我吧!
*注:為簡單起見,本文使用了jQuery的延期執(zhí)行。jQuery 的 Deferred對象 和 Promises/A+的規(guī)范 間有細微的差別,這個規(guī)范更標(biāo)準(zhǔn)。
以上這篇如何利用Promises編寫更優(yōu)雅的JavaScript代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
一文詳解TypeScript中的內(nèi)置數(shù)據(jù)類型
作為一門類型安全的編程語言,TypeScript?提供了多種內(nèi)置數(shù)據(jù)類型,幫助我們更好地定義和操作數(shù)據(jù),下面小編就來和大家詳細聊聊這些數(shù)據(jù)類型的相關(guān)知識吧2023-06-06Javascript實現(xiàn)漢字和拼音互轉(zhuǎn)的終極方案
網(wǎng)上關(guān)于JS實現(xiàn)漢字和拼音互轉(zhuǎn)的文章很多,但是比較雜亂,有的不支持多音字、不支持聲調(diào)或者字典文件太大,無法根據(jù)實際需要滿足需求。這篇文章給大家修正整理網(wǎng)上的幾種常見方法,文章結(jié)尾還附簡單的JS拼音輸入法,本文對大家具有一定的參考借鑒價值,下面一起看看吧。2016-10-10微信小程序?qū)崿F(xiàn)tab和swiper切換結(jié)合效果
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)tab和swiper切換結(jié)合效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11javascript instanceof 內(nèi)部機制探析
在 JavaScript 中,可以用 instanceof 來判斷一個對象是不是某個類或其子類的實例。2010-10-10