详解Angular.js的$q.defer()服务异步处理
首先本文以个人目前项目的部分代码为例说明为什么要用deferred。
functiongetBase64(img){//传入图片路径，返回base64
functiongetBase64Image(img,width,height){
varcanvas=document.createElement("canvas");
canvas.width=width?width:img.width;
canvas.height=height?height:img.height;
varctx=canvas.getContext("2d");
ctx.drawImage(img,0,0,canvas.width,canvas.height);
vardataURL=canvas.toDataURL();
returndataURL;
}
varimage=newImage();
image.crossOrigin='';
image.src=img;
varbase64='';
if(img){
image.onload=function(){
base64=getBase64Image(image);
console.log(base64);//位置一
}
console.log(base64);//位置二
}
}
就这段代码，我想要在位置二处使用base64，然后结果呢？
两处位置都打印了，位置一得到base64，ok，没问题。当我在位置二想使用base64时，问题来了？onload队列的问题，位置二总是无法正确的获取到想要的base64，这个时候就可以考虑异步问题了。
我相信大家应该和我一样，遇到这种情况第一反应应该是deferred让函数异步执行。
那么，我讲以上代码使用deferred之后，问题完美解决！
functiongetBase64(img){//传入图片路径，返回base64
functiongetBase64Image(img,width,height){
varcanvas=document.createElement("canvas");
canvas.width=width?width:img.width;
canvas.height=height?height:img.height;
varctx=canvas.getContext("2d");
ctx.drawImage(img,0,0,canvas.width,canvas.height);
vardataURL=canvas.toDataURL();
returndataURL;
}
varimage=newImage();
image.crossOrigin='';
image.src=img;
vardeferred=$q.defer();
if(img){
image.onload=function(){
deferred.resolve(getBase64Image(image));
}
returndeferred.promise;
}
}
getBase64('https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg')
.then(function(base64){
varbinaryblob=function(s,type){//blob对象
varbyteString=atob(s);
vararray=[];
for(vari=0;i<byteString.length;i++){
array.push(byteString.charCodeAt(i));
}
returnnewBlob([newInt8Array(array)],{type:type});
};
varbinaryPictureBlob=function(dataUrl,filterHead){//上传base64去头
vars=filterHead?dataUrl.replace(/^data:image\/(png|jpeg|pjpeg|bmp|gif|x-png);base64,/,""):dataUrl;
returnbinaryblob(s,"image/jpeg");
};
varpic=binaryPictureBlob(base64,true);//blob对象
//然后调接口将blob对象上传
});
问题解决了，我又想到了分享！那么我将我的拙见写出来，请不吝赐教！
什么是defer？
$q是Angular的一种内置服务，它可以使你异步地执行函数，并且当函数执行完成时或异常时它允许你使用函数的返回值或返回执行状态通知等。
defer的意思是延迟，$q.defer()可以创建一个deferred延迟对象实例，实例旨在暴露派生的Promise实例，Promise就是一种对执行结果不确定的一种预先定义，如果成功，就xx；如果失败，就xx，就像事先给出了一些承诺。
用法：
一个最完整的写法：
vardefer1=$q.defer();
functionfun(){
vardeferred=$q.defer();
$timeout(function(){
deferred.notify("notify");
if(iWantResolve){
deferred.resolve("resolved");
}else{
deferred.reject("reject");
}
},500);
returndeferred.promise;
}
$q.when(fun())
.then(function(success){
console.log("success");
console.log(success);
},function(err){
console.log("error");
console.log(err);
},function(notify){
console.log("notify");
console.log(notify);
})
.catch(function(reson){
console.log("catch");
console.log(reson);
})
.finally(function(final){
console.log('finally');
console.log(final);
});
1、通过$q服务注册一个延迟对象
vardeferred=$q.defer();
2、成功解决(resolve)了其派生的promise。参数value将来会被用作successCallback(success){}函数的参数value。
deferred.resolve(success)
3、未成功解决其派生的promise。参数reason被用来说明未成功的原因。此时deferred实例的promise对象将会捕获一个任务未成功执行的错误，promise.catch(errorCallback(reason){...})。
deferred.reject(reason)
4、更新promise的执行状态通知
deferred.notify("notify");
5、对promise进行处理
$q.when(fun())
.then(function(success){
console.log("success");
console.log(success);
},function(err){
console.log("error");
console.log(err);
},function(notify){
console.log("notify");
console.log(notify);
})
.catch(function(reson){
console.log("catch");
console.log(reson);
})
.finally(function(final){
console.log('finally');
console.log(final);
});
这里一般简写为：
fun().then(successCallback,errorCallback,notifyCallback);
注：
deferred的方法中的参数都返回给了promise与callback的参数都是一一对应的，如：
deferred.resolve(success)的success对应successCallback(success)的success。
这里在探讨下暂时很少用的$q.all().
$q.all()在多个promise必须执行成功后才能执行成功回调，传递值为数组或哈希值，数组中每个值为与Index对应的promise对象。
这个方法可以将每个promise里的某些重复代码或者判断，只需要在$q.all()的回调处理一次即可，简化了代码与工作量。
写法为：
variWantResolve=true;//没有实际意思，测试运行resolve或reject
functionpromise1(){
return$q(function(resolve,reject){
$timeout(function(){
if(iWantResolve){
resolve("promise1resolved");
}else{
reject("promise1reject");
}
},1000)
})
}
promise1()
.then(function(s1){//successcallback
console.log(s1);
})
.catch(function(err1){//errorcallback
console.log(err1);
});
functionpromise2(){
vardeferred=$q.defer();
$timeout(function(){
deferred.notify("promise2notify");
if(iWantResolve){
deferred.resolve("promise2resolved");
}else{
deferred.reject("promise2reject");
}
},500);
returndeferred.promise;
}
promise2()
.then(function(s2){
console.log(s2);
},function(err2){
console.log(err2);
});
$q.all([promise1(),promise2()])
.then(function(dataArr){
//promise都成功执行后的回调函数
console.log("$q.all:",dataArr);
},function(err){
console.log("$q.all:",err)
});
像这个例子，每个promise回调都打印了返回值，那么可以用$q.all()处理在其回调打印dataArr，则包含了所有promise返回值！
jquery和angular的deferred用法大致相同，但有两处要注意的地方：
jquery:
defer=$.Deferred(); defer.promise();
angular:
vardeferred=$q.defer(); deferred.promise;
总结
以上便是我对angular的$q、deferred、promise的一些浅显的理解，希望对大家的学习或者能有所帮助，如果有疑问大家可以留言交流。望各位大神多多评论、指教……
最后附上:
jquery中文网的deferred介绍：
http://www.jquery123.com/category/deferred-object/
一位大神对jquery的deferred的总结！
阮一峰：http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html