AngularJS 用promises和$q处理异步调用

AngluarJS $q 是受Chris Kowal’s Q库启发(https://github.com/kriskowal/q) 。 这个库通过一个回调“promise”让用户监控异步过程。 下面针对使用pormise的语法进行说明。

var promise = callThatRunsInBackground();

promise.then(

  function(answer) {

    // do something

  },

  function(error) {

    // report something

  },

  function(progress) {

   // report progress

  });

返回promise的服务有很多，例如$http, $interval, $timeout。
所有的promise返回一个单例对象， 由我们自己决定它来返回什么。例如$http.get 它的返回对象包含四个键值：data,status, header, config. 这些参数与success回调参数一样，如：

// this
$http.get('/api/v1/movies/avengers')
  .success(function(data, status, headers, config) {
     $scope.movieContent = data;

  });

// is the same as
var promise = $http.get('/api/v1/movies/avengers');

promise.then(

  function(payload) {

    $scope.movieContent = payload.data;

  });

在这个例子中，我们忽略error函数，以及promise的错误，update回调函数。初学者可能会疑惑，为什么我们要这么费力的获取一个答案。但每个人在开始写angluar中non-trivial服务时都会碰壁—–如何传递一个回调函数到一个调用函数，当服务返回早于回调调用前？

Promises and Services

Angular的语法要求我们用promise作为一个callback handle, 在service中进行异步操作，返回一个promise， 当异步工作完成时，然后promise的函数被调用。有了一个思路后，我们建立一个简单的controller和service例子来获取数据，并在页面中显示数据。

angular.module('atTheMoviesApp', [])

  .controller('GetMoviesCtrl', 

    function($log, $scope, movieService) {

     $scope.getMovieListing = function(movie) {

       var promise = 

           movieService.getMovie('avengers');

       promise.then(

          function(payload) { 

              $scope.listingData = payload.data;

          },

          function(errorPayload) {

              $log.error('failure loading movie', errorPayload);

          });

     };

  })

  .factory('movieService', function($http) {

    return {

      getMovie: function(id) {

         return $http.get('/api/v1/movies/' + id);

      }

    }

  });

现在你可能学会调用 异步调用$http方法，获取一个result，并更新用户界面。 服务不会理解UI的含义，你也不能将$scope传递到getMovie函数中, 这样看似很好，然而。。

那怎么进行post操作呢

下载端绑定一个$http.get promise,并将其传递给controller，controller会自己处理这个结果。 如果你想要服务 进行 post-process？ 更重要的是，如果你想处理 $http 的error，在服务层，而controller不需要直接处理 404s 等

在更复杂的情况，你可能解决这个问题，通过建立自己的promise，重构service来使用promise，这样就可以在service中处理和拿回我们想要的负载。

...

.factory('movieService', function($http, $log, $q) {

  return {

   getMovie: function(movie) {

     var deferred = $q.defer();

   $http.get('/api/v1/movies/' + movie)

       .success(function(data) { 

          deferred.resolve({

             title: data.title,

             cost: data.price});

       }).error(function(msg, code) {

          deferred.reject(msg);

          $log.error(msg, code);

       });

     return deferred.promise;

   }

  }

 });

更有前途的理由是，我们构建一个内嵌的promise结构，可以控制调用的input和output，合适的log error，转换output，并且提供一个状态来更新 deferred.notify(msg)。

But there is a better, more foolproof way…

但是有一个更好的方法，更简单

Composing Promises 组合promises

我们可以避免创建自己的deferred对象，通过结合一个then转换自己的response，返回一个转换的结果到调用着，来管理分散的promise。例如，我们想包含$http所响应的数据，而不用处理自己的deferred对象:

this.getMovie = function(movie) {

    return $http.get('/api/v1/movies/' + movie)

           .then(

              function (response) {

                return {

                   title: response.data.title,

                   cost:  response.data.price

                });

              });

};

现在这个内容返回到服务方法的then中，将形成一个链promise，它来转换输出。而controller可以做没http的工作

$scope.getMovie = function(movie) {

   service.getMovie(movie) 

   .then(function(movieData) {

      $scope.movieData = movieData;

   });

};

我减少这个代码量，来实现一相同的结果，我们不需要担心在Ajax中将会发生失败的事情。

Handling problems in nested service calls

在service calls 中处理问题

现在我们用一个内嵌的返回 success 函数， promise代码将自动检测error函数的缺失，并终止调用默认的$http的error对象。 但是，你可能会担心如何转换error呢？

this.getMovie = function(movie) {

    return $http.get('/api/v1/movies/' + movie)

           .then(

              function (response) {

                return {

                   title: response.data.title,

                   cost:  response.data.price

               });

             },

              function (httpError) {

                 // translate the error

                 throw httpError.status + " : " + 

                       httpError.data;

              });

};

现在error返回一个单string，不是$http 的error, data、status、 header和config属性。

Doing more than one thing at a time 一次做更多

这是一个强大的service, 当需要同时处理多个异步活动时。 $q功能让我们同时调用多个回调函数，利用单一函数来连接他们。

service('asyncService', function($http, $q) {

      return {

        loadDataFromUrls: function(urls) {

          var deferred = $q.defer();

          var urlCalls = [];

          angular.forEach(urls, function(url) {

            urlCalls.push($http.get(url.url));

          });

          // they may, in fact, all be done, but this

          // executes the callbacks in then, once they are

          // completely finished.

          $q.all(urlCalls)

          .then(

            function(results) {

            deferred.resolve(

             JSON.stringify(results)) 

          },

          function(errors) {

            deferred.reject(errors);

          },

          function(updates) {

            deferred.update(updates);

          });

          return deferred.promise;

        }

      };

    });

这个例子中的负载包含一组对象，Url 如下：

[ 

 { url: 'ajax1.html' },

 { url: 'ajax2.html' },

 { url: 'ajax3.html' }

]

对于每个URL，一个promise 由执行$http.get创建，promise添加到一个数组中，在$q.all 的函数获取一个数组promise, 一个转换结果到一个promise 包含一个对象:

[

  promise1_result_payload,

  promise2_result_payload,

  promise3_result_payload

]

如果这三个调用完成，这个代码将转换为JSON到caller

from：http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/