[转载]JavaScript异步编程助手:Promise模式

http://www.csdn.net/article/2013-08-12/2816527-JavaScript-Promise

http://www.cnblogs.com/hustskyking/p/javascript-asynchronous-programming.html

摘要:Promises是一种令代码异步行为更加优雅的抽象,它很有可能是JavaScript的下一个编程范式,一个Promise即表示任务结果,无论该任务是否完成。

异步模式在Web编程中变得越来越重要,对于Web主流语言JavaScript来说,这种模式实现起来不是很利索,为此,许多 JavaScript库(比如 jQuery和Dojo、AngularJS)添加了一种称为Promise的抽象(术语称作Deferred模式)。通过这些库,开发人员能够在实际编 程中使用Promise模式,每个Promise都拥有一个叫做then的唯一接口,当Promise失败或成功时,它就会进行回调。它代表了一种可能会 长时间运行而且不一定必须完成的操作结果。这种模式不会阻塞和等待长时间的操作完成,而是返回一个代表了承诺的(promised)结果的对象。

本文我们将讨论JavaScript库(比如jQueryAngularJS)是如何使用Promise模式的来处理异步的,其实就是通过回调的方式提供容错支持。

下面让我们来看看jQuery是如何操作的:

  1. var $info = $("#info");  
  2. $.ajax({  
  3.     url:"/echo/json/",  
  4.     data: { json: JSON.stringify({"name": "someValue"}) },  
  5.     type:"POST",  
  6.     success: function(response)  
  7.     {  
  8.        $info.text(response.name);  
  9.     }  
  10. });  

在 这个例子中,你可以看到当设置成功后会指定一个回调,这并不是Promise,但却是一种很好的回调方式。当Ajax调用完成后,它便会执行 success函数。根据库所使用的异步操作,你可以使用各种不同的回调(即任务是否成功,都会进行回调,做出响应)。使用Promise模式会简化这个 过程,异步操作只需返回一个对象调用。这个Promise允许你调用一个叫做then的方法,然后让你指定回调的function(s)个数,下面让我们 来看看jQuery是如何建立Promise的:

  1. var $info = $("#info");  
  2. $.ajax({  
  3.     url: "/echo/json/",  
  4.     data: {  
  5.         json: JSON.stringify({  
  6.             "name": "someValue"  
  7.         })  
  8.     },  
  9.     type: "POST"  
  10. })  
  11. .then(function (response) {  
  12.     $info.text(response.name);  
  13. });  

有趣的是,ajax对象返回xhr对象实现Promise模式,所以我们可以调用then方法,这样做的优势是你可以链式调用,实现独立操作,如下所示 :

  1. var $info = $("#info");  
  2. $.ajax({  
  3.     url: "/echo/json/",  
  4.     data: {  
  5.         json: JSON.stringify({  
  6.             "name": "someValue"  
  7.         })  
  8.     },  
  9.     type: "POST"  
  10. })  
  11. .then(function (response) {  
  12.     $info.text(response.name);  
  13. })  
  14. .then(function () {  
  15.     $info.append("...More");  
  16. })  
  17. .done(function () {  
  18.     $info.append("...finally!");  
  19. });  

由于许多库都开始采用Promise模式,所以异步操作会变的非常容易。但如果站在相反的角度思考,Promise将会是什么样子的呢?其中一个非常重要的模式是函数可以接受两种功能,一个是成功时的回调,另一个是失败时的回调。

  1. var $info = $("#info");  
  2. $.ajax({  
  3.     // Change URL to see error happen  
  4.     url: "/echo/json/",  
  5.     data: {  
  6.         json: JSON.stringify({  
  7.             "name": "someValue"  
  8.         })  
  9.     },  
  10.     type: "POST"  
  11. })  
  12. .then(function (response) {  
  13.     // success  
  14.     $info.text(response.name);  
  15. },   
  16. function () {  
  17.     // failure  
  18.     $info.text("bad things happen to good developers");  
  19. })  
  20. .always(function () {  
  21.     $info.append("...finally");  
  22. });  

需要注意的是,在jQuery里,无论成功还是失败,我们都会使用一个调用来指定我们想要调用的。下面让来看看AngularJS是如何使用Promise模式的:

  1. var m = angular.module("myApp", []);  
  2. m.factory("dataService", function ($q) {  
  3.     function _callMe() {  
  4.         var d = $q.defer();  
  5.         setTimeout(function () {  
  6.             d.resolve();  
  7.             //defer.reject();  
  8.         }, 100);  
  9.         return d.promise;  
  10.     }  
  11.     return {  
  12.         callMe: _callMe  
  13.     };  
  14. });  
  15. function myCtrl($scope, dataService) {  
  16.     $scope.name = "None";  
  17.     $scope.isBusy = true;  
  18.     dataService.callMe()  
  19.       .then(function () {  
  20.         // Successful  
  21.         $scope.name = "success";  
  22.       },   
  23.       function () {  
  24.         // failure  
  25.         $scope.name = "failure";  
  26.       })  
  27.       .then(function () {  
  28.         // Like a Finally Clause  
  29.         $scope.isBusy = false;  
  30.       });  
  31. }  

你可以在JSFiddle里试试这些例子,并且看看会产生哪些效果。使用Promise来操作异步是一种非常简单的方式,而且还可以简化你的代码,岂不是一举两得的好方法。

更多关于Promise的介绍及示例,可以前往官网查看

来自:JavaScript Promise

原文地址:https://www.cnblogs.com/Benoly/p/4171507.html