異步模式在 Web 編程中變得越來(lái)越重要，如何處理異步請(qǐng)求后的操作是一件麻煩事。Promise 是一種異步編程模型，術(shù)語(yǔ)稱(chēng)作 Deferred 模式，它通過(guò)一組API來(lái)規(guī)范化異步操作，讓異步操作的流程控制更加容易。

Promise 編程模式也被稱(chēng)為 thenable，可以理解為 延遲后執(zhí)行。每個(gè) Promise 都擁有一個(gè)叫做 then 的唯一接口，當(dāng) Promise 失敗或成功時(shí)，它就會(huì)進(jìn)行回調(diào)。它代表了一種可能會(huì)長(zhǎng)時(shí)間運(yùn)行而且不一定必須完成的操作結(jié)果。這種模式不會(huì)阻塞和等待長(zhǎng)時(shí)間的操作完成，而是返回一個(gè)代表了承諾的（promised）結(jié)果的對(duì)象。

當(dāng)前的許多 JavaScript 庫(kù)（如 jQuery 和 Dojo、AngularJS）均添加了這種稱(chēng)為 Promise 的抽象。通過(guò)這些庫(kù)，開(kāi)發(fā)人員能夠在實(shí)際編程中使用 Promise 模式。

下面我們將以 jQuery 為例討論 JavaScript 庫(kù)是如何使用 Promise 模式的來(lái)處理異步的，其實(shí)就是通過(guò)回調(diào)的方式提供容錯(cuò)支持。在某個(gè)操作成功或失敗或任何情況下都執(zhí)行對(duì)應(yīng)的回調(diào)，盡量把某段邏輯可能出現(xiàn)的情況都 handle 住。

首先讓我們來(lái)看看 jQuery 一般是如何操作的：

代碼如下:

var $info = $("#info");

$.ajax({

url:"/echo/json/",

data: { json: JSON.stringify({"name": "someValue"}) },

type:"POST",

success: function(response)

{

$info.text(response.name);

}

});

在這個(gè)例子中，你可以看到當(dāng)設(shè)置成功后會(huì)指定一個(gè)回調(diào)，是一種很好的回調(diào)方式，這并不是 Promise，jQuery 官方文檔也不再推薦這種方式（http://api.jquery.com/jQuery.ajax/#jqXHR）。 當(dāng) Ajax 調(diào)用完成后，它便會(huì)執(zhí)行 success 函數(shù)。根據(jù)庫(kù)所使用的異步操作，你可以使用各種不同的回調(diào)（即任務(wù)是否成功，都會(huì)進(jìn)行回調(diào)，做出響應(yīng)）。使用 Promise 模式會(huì)簡(jiǎn)化這個(gè)過(guò)程，異步操作只需返回一個(gè)對(duì)象調(diào)用。這個(gè) Promise 允許你調(diào)用一個(gè)叫做 then 的方法，然后讓你指定回調(diào)的 function(s) 個(gè)數(shù)。

下面讓我們來(lái)看看 jQuery 是如何建立 Promise 的：

代碼如下:

var $info = $("#info");

$.ajax({

url: "/echo/json/",

data: {

json: JSON.stringify({

"name": "someValue"

})

},

type: "POST"

})

.then(function (response) {

$info.text(response.name);

});

jQuery ajax 對(duì)象通過(guò)返回 xhr 對(duì)象實(shí)現(xiàn) Promise 模式，所以我們可以調(diào)用 then 方法，這樣做的優(yōu)勢(shì)是你可以鏈?zhǔn)秸{(diào)用，實(shí)現(xiàn)獨(dú)立操作，如下所示 ：

復(fù)制代碼 代碼如下:

var $info = $("#info");

$.ajax({

url: "/echo/json/",

data: {

json: JSON.stringify({

"name": "someValue"

})

},

type: "POST"

})

.then(function (response) {

$info.text(response.name);

})

.then(function () {

$info.append("...More");

})

.done(function () {

$info.append("...finally!");

});

由于許多庫(kù)都開(kāi)始采用 Promise 模式，所以異步操作會(huì)變的非常容易。但如果站在相反的角度思考，Promise 將會(huì)是什么樣子的呢？其中一個(gè)非常重要的模式是函數(shù)可以接受兩種功能，一個(gè)是成功時(shí)的回調(diào)，另一個(gè)是失敗時(shí)的回調(diào)。

代碼如下:

var $info = $("#info");

$.ajax({

// Change URL to see error happen

url: "/echo/json/",

data: {

json: JSON.stringify({

"name": "someValue"

})

},

type: "POST"

})

.then(function (response) {

// success

$info.text(response.name);

},

function () {

// failure

$info.text("bad things happen to good developers");

})

.always(function () {

$info.append("...finally");

});

需要注意的是，在 jQuery 里，無(wú)論成功還是失敗，我們都會(huì)使用一個(gè)調(diào)用來(lái)指定我們想要調(diào)用的。

其實(shí)這里也可以這樣來(lái)寫(xiě)，這也是 jQuery 官方文檔里推薦的方法：

代碼如下:

var $info = $("#info");

$.ajax({

// Change URL to see error happen

url: "/echo/json/",

data: {

json: JSON.stringify({

"name": "someValue"

})

},

type: "POST"

})

.done(function (response) {

// success

$info.text(response.name);

}).fail(function () {

// failure

$info.text("bad things happen to good developers");

})

.always(function () {

$info.append("...finally");

});

下面再來(lái)看看 AngularJS 是如何使用 Promise 模式的：

代碼如下:

var m = angular.module("myApp", []);

m.factory("dataService", function ($q) {

function _callMe() {

var d = $q.defer();

setTimeout(function () {

d.resolve();

//defer.reject();

}, 100);

return d.promise;

}

return {

callMe: _callMe

};

});

function myCtrl($scope, dataService) {

$scope.name = "None";

$scope.isBusy = true;

dataService.callMe()

.then(function () {

// Successful

$scope.name = "success";

},

function () {

// failure

$scope.name = "failure";

})

.then(function () {

// Like a Finally Clause

$scope.isBusy = false;

});

}

你可以在 JSFiddle 里試試這些例子，并且看看會(huì)產(chǎn)生哪些效果。使用 Promise 來(lái)操作異步是一種非常簡(jiǎn)單的方式，而且還可以簡(jiǎn)化你的代碼，確實(shí)是一舉兩得的好方法。

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄