在使用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就可以放在函数里面进行处理了。

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