Angular JS中的then()

在使用Angular JS的过程中，有些细节理解起来有点费事，例如其中的 then() 函数。

总的来说有一个功能，用Angular JS的post方法向后台发送请求，然后后台返回一段数据交个Angular 来进行处理，先看看service部分：

fs.services.factory('MonitorService', ['$http', '$q', function ($http, $q) {
    return {
        queryByYearOrMonth: function (postData) {
            var delay = $q.defer();
            $http.post(fs.common.baseResourceURL2 + '/api/monitor/uploadQuantity', postData,{})
                 .success(function (data) {
                    delay.resolve(data);
                }).error(function () {
                    delay.reject("Can't search uploadQuantity data.");
                });	
            return delay.promise;
        }
    }
}]);

如果不经过深入测试的话，第一反应是觉得 delay.resolve(data)这句在处理数据，把数据放在delay对象的promise中，因为最后一句是return delay.promise，想当然地认为

delay.promise就是已经处理好的可以交给controller使用的数据，但经过实际测试，发现不是这么回事。

那就来看看delay.promise到底是什么？在浏览器控制台中，以此输出delay.promise中的属性和值，如下：

then: function (callback, errback) {
          var result = defer();

          var wrappedCallback = function(value) {
            try {
              result.resolve((callback || defaultCallback)(value));
            } catch(e) {
              exceptionHandler(e);
              result.reject(e);
            }
          };

          var wrappedErrback = function(reason) {
            try {
              result.resolve((errback || defaultErrback)(reason));
            } catch(e) {
              exceptionHandler(e);
              result.reject(e);
            }
          };

          if (pending) {
            pending.push([wrappedCallback, wrappedErrback]);
          } else {
            value.then(wrappedCallback, wrappedErrback);
          }

          return result.promise;
        } 
always: function (callback) {
          
          function makePromise(value, resolved) {
            var result = defer();
            if (resolved) {
              result.resolve(value);
            } else {
              result.reject(value);
            }
            return result.promise;
          }
          
          function handleCallback(value, isResolved) {
            var callbackOutput = null;            
            try {
              callbackOutput = (callback ||defaultCallback)();
            } catch(e) {
              return makePromise(e, false);
            }            
            if (callbackOutput && callbackOutput.then) {
              return callbackOutput.then(function() {
                return makePromise(value, isResolved);
              }, function(error) {
                return makePromise(error, false);
              });
            } else {
              return makePromise(value, isResolved);
            }
          }
          
          return this.then(function(value) {
            return handleCallback(value, true);
          }, function(error) {
            return handleCallback(error, false);
          });
        } 

有两个部分，then 和 always，两个都是可执行的方法。

always 这里不作讨论。来看看then ，它有两个参数，callback 和 errback， 第一个用来处理“resolved”和“success”事件；第二个用来处理“rejected”和“failure”事件。

所以，delay.promise不是现成的数据，还不能直接使用。然后来看看这个then怎么使用（主要是如何从中提取出我们需要的后台返回的数据）：

uploadQuantityLoader(params).then(function(Cquantity){
		$scope.quantityMap = Cquantity.quantityMap;
		makeGraph();	
	});

then(fn) 方法中带一个参数，这个参数就是要被执行的函数，并且，这个作为参数的函数本身有一个参数，这个参数就是我们需要的数据，这里是关键，本例中也就是

Cquantity，然后这个Cquantity就可以放在函数里面进行处理了。

反正绕了一大圈，我们真正需要的就是其中的数据。