JavaScript异步编程好助手：Promise模式

发表于 由

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

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

本文我们将讨论JavaScript库（比如jQuery、AngularJS）是如何使用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.        
  4. // Change URL to see error happen   
  5.     url: "/echo/json/",   
  6.     data: {   
  7.         json: JSON.stringify({   
  8.             "name": "someValue"  
  9.         })   
  10.     },   
  11.     type: "POST"  
  12. })   
  13. .then(function (response) {   
  14.        
  15. // success   
  16.     $info.text(response.name);   
  17. },   
  18. function () {   
  19.        
  20. // failure   
  21.     $info.text("bad things happen to good developers");   
  22. })   
  23. .always(function () {   
  24.     $info.append("...finally");   
  25. });  

需要注意的是，在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.                
  8. //defer.reject();   
  9.         }, 100);   
  10.         return d.promise;   
  11.     }   
  12.     return {   
  13.         callMe: _callMe   
  14.     };   
  15. });   
  16. function myCtrl($scope, dataService) {   
  17.     $scope.name = "None";   
  18.     $scope.isBusy = true;   
  19.     dataService.callMe()   
  20.       .then(function () {   
  21.            
  22. // Successful   
  23.         $scope.name = "success";   
  24.       },   
  25.       function () {   
  26.            
  27. // failure   
  28.         $scope.name = "failure";   
  29.       })   
  30.       .then(function () {   
  31.            
  32. // Like a Finally Clause   
  33.         $scope.isBusy = false;   
  34.       });   
  35. }  

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

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

via：JavaScript Promise

  1. da shang
    donate-alipay
               donate-weixin weixinpay

发表评论↓↓