总的来说有一个功能,用Angular JS的post方法向后台发送请求,然后后台返回一段数据交个Angular 来进行处理,先看看service部分:
[javascript] view plain copy
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中的属性和值,如下:
[javascript] view plain copy
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怎么使用(主要是如何从中提取出我们需要的后台返回的数据):
[javascript] view plain copy
uploadQuantityLoader(params).then(function(Cquantity){
$scope.quantityMap = Cquantity.quantityMap
makeGraph()
})
then(fn) 方法中带一个参数,这个参数就是要被执行的函数,并且,这个作为参数的函数本身有一个参数,这个参数就是我们需要的数据,这里是关键,本例中也就是Cquantity,然后这个Cquantity就可以放在函数里面进行处理了。
then: function (callback, errback) {var result = defer()
有两个部分,then 和 always,两个都是可执行的方法。
always 这里不作讨论。来看看then ,它有两个参数,callback 和 errback, 第一个用来处理“resolved”和“success”事件;第二个用来处理“rejected”和“failure”事件。
所以,delay.promise不是现成的数据,还不能直接使用。然后来看看这个then怎么使用(主要是如何从中提取出我们需要的后台返回的数据):