快捷導(dǎo)航

如何利用Promises編寫更優(yōu)雅的JavaScript代碼

更新時(shí)間：2016年05月17日 09:42:12 投稿：jingxian

如何利用Promises編寫更優(yōu)雅的JavaScript代碼？下面小編就為大家?guī)硪黄肞romises編寫更優(yōu)雅的JavaScript代碼。希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

你可能已經(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)歷，你會(huì)認(rèn)出我們創(chuàng)建了一個(gè) GET 請(qǐng)求并且希望響應(yīng)內(nèi)容是 JSON。我們還傳遞了一個(gè)回調(diào)函數(shù)來接受響應(yīng)的 JSON，以將數(shù)據(jù)添加到文檔中。

另外一種書寫方法是使用 getJSON 方法返回的 promise 對(duì)象。你可以直接在這個(gè)返回對(duì)象上綁定一個(gè)回調(diào)。

var promise = $.getJSON('http://hipsterjesus.com/api/');promise.done(function(data) { 
 $('body').append(data.text); 
});

在上面的回調(diào)例子中，當(dāng)響應(yīng)成功時(shí)它將 API 請(qǐng)求的結(jié)果添加到文檔中。但當(dāng)響應(yīng)失敗是會(huì)發(fā)生什么呢？我們可以在我們的 promise 上綁定一個(gè)失敗處理器。

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 變量，這樣更簡(jiǎn)潔，一眼就能看出代碼的作用。

$.getJSON('http://hipsterjesus.com/api/').done(function(data) { 
 $('body').append(data.text);}).fail(function() { 
 $('body').append('<p>Oh no, something went wrong!</p>'); 
});

jQuery 也包含一個(gè)一直發(fā)生的事件處理器，不論請(qǐng)求成功失敗都會(huì)被調(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)造一個(gè) HipsterJesus API 的封裝對(duì)象。我們會(huì)添加一個(gè)方法——html，它將來自 API 的 HTML 數(shù)據(jù)返回。與之前設(shè)置一個(gè)回調(diào)處理器來解析請(qǐng)求不同，我們可以讓方法返回一個(gè) promise 對(duì)象。

var hipsterJesus = { 
 html: function() { 
  return $.getJSON('http://hipsterjesus.com/api/').then(function(data) { 
   return data.text; 
  }); 
}};

這個(gè)做法很酷，這樣我們可以繞過 promise 對(duì)象而不必?fù)?dān)心何時(shí)或如何解析它的值。任何需要 promise 返回值的代碼只需注冊(cè)一個(gè)成功響應(yīng)回調(diào)即可。

then方法允許我們修改promise的結(jié)果并將其傳遞給鏈中的下一個(gè)處理器。這意味現(xiàn)在我們可以這樣使用新的API：

hipsterJesus.html().done(function(html) { 
 $("body").append(html); 
});

直到最近，AngularJS 出現(xiàn)了一個(gè)殺手級(jí)特性，模板可以直接綁定到promise。在Angular的控制器中，像這樣：

$scope.hipsterIpsum = $http.get('http://hipsterjesus.com/api/');

這樣，在模板中寫 {{ hipsterIpsum.text }} 就很簡(jiǎn)單了。當(dāng) promise 解析后，Angular 不需要自動(dòng)更新視圖。不幸的是 Angular 團(tuán)隊(duì)已經(jīng)放棄了這一特性?，F(xiàn)在，它可以通過調(diào)用 $parseProvider.unwrapPromises(true) 來啟用。我希望Angular已經(jīng)其他框架一直包含此特性（我會(huì)一直留意）。

鏈?zhǔn)秸{(diào)用

Promise 最出彩的部分是你可以將它們串聯(lián)起來。比如說我們想添加一個(gè)方法到一個(gè)返回一段數(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 方法中。因?yàn)閜romise回調(diào)函數(shù)的返回值將傳遞給鏈中的下一個(gè)回調(diào)，我們能夠在通過它們時(shí)自由地創(chuàng)建小的、功能性的方法來改變數(shù)據(jù)。

我們可以按需求任意次串聯(lián)promise。讓我們添加一個(gè)。

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(/. /); 
   })); 
  }); 
 }};

多個(gè)調(diào)用

可能 promise 最顯著的特點(diǎn)是調(diào)用多個(gè) API 的能力。當(dāng)使用回調(diào)時(shí)，如果你需要同時(shí)創(chuàng)建兩個(gè)API調(diào)用時(shí)會(huì)發(fā)生什么呢？你可能會(huì)這樣寫：

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 的話，這就簡(jiǎn)單多了：

var firstPromise = $.get("http://example.com/first"); 
var secondPromise = $.get("http://example.com/second"); 
$.when(firstPromise, secondPromise).done(function(firstData, secondData) { 
 // do something 
});

這里我們使用 when 方法，將其綁定到一個(gè)供兩個(gè)請(qǐng)求都完成時(shí)調(diào)用的處理器上。

結(jié)論

這就是 Promise。希望你馬上就想到一些可以用 Promise 實(shí)現(xiàn)的的可怕的事情。你最喜歡使用它們的方式是什么？在評(píng)論中告訴我吧！

*注：為簡(jiǎn)單起見，本文使用了jQuery的延期執(zhí)行。jQuery 的 Deferred對(duì)象和 Promises/A+的規(guī)范間有細(xì)微的差別，這個(gè)規(guī)范更標(biāo)準(zhǔn)。

以上這篇如何利用Promises編寫更優(yōu)雅的JavaScript代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: