Javascript非同步程式設計模型Promise模式詳細介紹_javascript技巧

Promise 程式模式也稱為 thenable，可以理解為 延遲後執行。每個 Promise 都擁有一個叫做 then 的唯一接口，當 Promise 失敗或成功時，它就會進行回調。它代表了一種可能會長時間運行且不一定必須完成的操作結果。這種模式不會阻塞和等待長時間的操作完成，而是傳回一個代表了承諾的（promised）結果的物件。

目前的許多 JavaScript 函式庫（如 jQuery 和 Dojo、AngularJS）都加入了這種稱為 Promise 的抽象。透過這些函式庫，開發人員能夠在實際程式設計中使用 Promise 模式。

下面我們將以 jQuery 為例討論 JavaScript 函式庫是如何使用 Promise 模式的來處理非同步的，其實就是透過回呼的方式提供容錯支援。在某個操作成功或失敗或任何情況下都執行對應的回調，盡量把某段邏輯可能出現的情況都 handle 住。

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

複製程式碼 程式碼如下:

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

在這個例子中，你可以看到當設定成功後會指定一個回調，是一種很好的回調方式，這並不是Promise，jQuery 官方文件也不再推薦這種方式（http:// api.jquery.com/jQuery.ajax/#jqXHR）。 當 Ajax 呼叫完成後，它便會執行 success 函數。根據函式庫所使用的非同步操作，你可以使用各種不同的回呼（即任務是否成功，都會進行回調，做出回應）。使用 Promise 模式會簡化這個過程，非同步操作只需傳回一個物件呼叫。這個 Promise 允許你呼叫一個叫做 then 的方法，然後讓你指定回呼的 function(s) 個數。

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

複製程式碼 程式碼如下:

程式碼如下:
var $info = $("#info");
$.ajax({
    url: "/echo/json/",
    data: {
SON  stringify({
            "name": "someValue"
        })
    }, $info.text(response.name);
});



jQuery ajax 物件透過返回 xhr 物件來實現 Promise 模式，所以我們可以調用 then 方法，這樣做的優點是你可以鍊式調用，實現獨立操作，如下所示 ：

複製程式碼 程式碼如下:var $info = $("#info");

$.ajax({

    url: "/echo/json/",
    data: {
        🎜> })
    },
    type: "POST"
})
.then(function (response) {
    $info.text(response.name); 🎜>.then(function () {
    $info.append("...More");
})
.done(function () {
    $info.append(". ..finally!");
});



由於許多函式庫都開始採用 Promise 模式，所以非同步操作會變的非常容易。但如果站在相反的角度思考，Promise 會是什麼樣子的呢？其中一個非常重要的模式是函數可以接受兩種功能，一個是成功時的回調，另一個是失敗時的回呼。

複製程式碼

程式碼如下:

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

$.ajax({
// Change URL to see error happen
    url: "/echo/json/",
    data 🠎> >            "name": "someValue"
        })
    },
   }: ess
    $info.text(response.name);
},
function () {
// failure
    $info.text("bad things happen to good developers");
})
.always(function () {
    $info.append("...finally");
});



要注意的是，在 jQuery 裡，無論成功或失敗，我們都會使用一個呼叫來指定我們想要呼叫的。
其實這裡也可以這樣來寫，這也是 jQuery 官方文件裡推薦的方法：

複製程式碼

程式碼如下:var $info = $("#info"); $.ajax({

// Change URL to see error happen

    url: "/echo/json/",
    data 🠎> >            "name": "someValue"        })

    },
 ccess
  $info.text(response.name);
}).fail(function () {
  // failure
  $info.text("bad things happen to good developers");
})
.always(function () {
    $info.append("...finally");
});



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





複製程式碼

程式碼如下:

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

m.factory("dataService", function ($q) {    function _callMe() {       d.resolve();            //defer.reject();        }    return {        callMe: _callMe

    };

});
function myCtrl($scope, dataService) {

    $scope.name = "None";
    $scope.isBusy = true;
  ) {
        // Successful
        $scope.name = "success";
    ure
        $scope.name = "failure";
      })
      .then(function () {
        // Like a Finally Clause
       // Like a Finally Clause
       // Like a Finally Clause
    );

}

你可以在 JSFiddle 試試這些例子，看看會產生哪些效果。使用 Promise 來操作非同步是一種非常簡單的方式，而且還可以簡化你的程式碼，確實是一舉兩得的好方法。
更多關於Promise的介紹及範例，可以前往官網（http://www.promisejs.org/）查看。