发表于: 2017-07-06 22:06:28

1 735


今天完成的事情:终于拆出来了一个$http服务;

明天计划的事情:尝试写一个指令吧。

遇到的问题:懒加载和常量还没有学会;

收获:$q和$http服务;

如果想使用 $http 或者其他异步操作, 那 $q 是必须要掌握的概念啦. Let's get started!

如何理解$q, deferred object ?

假设有一个家具厂,而它有一个VIP客户张先生。

有一天张先生需要一个豪华衣柜,于是,他打电话给家具厂说我需要一个衣柜,回头做好了给我送来,这个操作就叫$q.defer,也就是延期,因为这个衣柜不是现在要的,所以张先生这是在发起一个可延期的请求。

同时,家具厂给他留下了一个回执号,并对他说:我们做好了会给您送过去,放心吧。这叫做promise,也就是承诺。

这样,这个defer算是正式创建了,于是他把这件事记录在自己的日记上,并且同时记录了回执号,这叫做deferred,也就是已延期事件。

现在,张先生就不用再去想着这件事了,该做什么做什么,这就是“异步”的含义。

假设家具厂在一周后做完了这个衣柜,并如约送到了张先生家(包邮哦,亲),这就叫做deferred.resolve(衣柜),也就是“已解决”。而这时候张先生只要签收一下这个(衣柜)参数就行了,当然,这个“邮包”中也不一定只有衣柜,还可以包含别的东西,比如厂家宣传资料、产品名录等。整个过程中轻松愉快,谁也没等谁,没有浪费任何时间。

假设家具厂在评估后发现这个规格的衣柜我们做不了,那么它就需要deferred.reject(理由),也就是“拒绝”。拒绝没有时间限制,可以发生在给出承诺之后的任何时候,甚至可能发生在快做完的时候。而且拒绝时候的参数也不仅仅限于理由,还可以包含一个道歉信,违约金之类的,总之,你想给他什么就给他什么,如果你觉得不会惹恼客户,那么不给也没关系。

假设家具厂发现,自己正好有一个符合张先生要求的存货,它就可以用$q.when(现有衣柜)来把这个承诺给张先生,这件事就立即被解决了,皆大欢喜,张先生可不在乎你是从头做的还是现有的成品,只会惊叹于你们的效率之高。

假设这个家具厂对客户格外的细心,它还可能通过deferred.notify(进展情况)给张先生发送进展情况的“通知”。

这样,整个异步流程就圆满完成,无论成功或者失败,张先生都没有往里面投入任何额外的时间成本。

好,我们再扩展一下这个故事:

张先生这次需要做一个桌子,三把椅子,一张席梦思,但是他不希望今天收到个桌子,明天收到个椅子,后天又得签收一次席梦思,而是希望家具厂做好了之后一次性送过来,但是他下单的时候又是分别下单的,那么他就可以重新跟家具厂要一个包含上述三个承诺的新承诺,这就是$q.all(桌子承诺,椅子承诺,席梦思承诺),

这样,他就不用再关注以前的三个承诺了,直接等待这个新的承诺完成,到时候只要一次性签收了前面的这些承诺就行了。

//登录模块的服务

myApp.factory("loginIn",["$http","$q",function($http,$q){

var loginIn={};

this.url="/carrots-admin-ajax/a/login";

var login=this;

loginIn.getLoginIn=function(a,b){

var defered=$q.defer();

$http({

method:"POST",

url:login.url,

params:{

name:a,

pwd:b

}

})

.then(function(res){

defered.resolve(res);

})

return defered.promise;

}

return loginIn;

}])

//获取登陆账号密码js

myApp.controller("loginCtrl",function(loginIn,$state){

var self=this;

self.submitForm=function(){

loginIn.getLoginIn(self.userdata.username,self.userdata.password)

.then(function(res){

if(res.data.message=="success"){

$state.go("home.welcome",{});

}

else{

self.tip = res.data.message;

}

})

}

})



返回列表 返回列表
评论

    分享到