JavaScript中then的作用

JavaScript013

JavaScript中then的作用,第1张

总的来说有一个功能,用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怎么使用(主要是如何从中提取出我们需要的后台返回的数据):