快捷導(dǎo)航

Javascript異步編程模型Promise模式詳細介紹

更新時間：2014年05月08日 10:40:36 作者：

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

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

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

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

首先讓我們來看看 jQuery 一般是如何操作的：

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

var $info = $("#info");
$.ajax({
    url:"/echo/json/",
    data: { json: JSON.stringify({"name": "someValue"}) },
    type:"POST",
    success: function(response)
    {
       $info.text(response.name);
    }
});

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

下面讓我們來看看 jQuery 是如何建立 Promise 的：

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

var $info = $("#info");
$.ajax({
    url: "/echo/json/",
    data: {
        json: JSON.stringify({
            "name": "someValue"
        })
    },
    type: "POST"
})
.then(function (response) {
    $info.text(response.name);
});

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

復(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!");
});

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

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

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 里，無論成功還是失敗，我們都會使用一個調(diào)用來指定我們想要調(diào)用的。
其實這里也可以這樣來寫，這也是 jQuery 官方文檔里推薦的方法：

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

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");
});

下面再來看看 AngularJS 是如何使用 Promise 模式的：

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

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
    };
});

你可以在 JSFiddle 里試試這些例子，并且看看會產(chǎn)生哪些效果。使用 Promise 來操作異步是一種非常簡單的方式，而且還可以簡化你的代碼，確實是一舉兩得的好方法。
更多關(guān)于Promise的介紹及示例，可以前往官網(wǎng)（http://www.promisejs.org/）查看。

您可能感興趣的文章: