Angular JS中 Promise用法

一、Promise形象讲解A

promise不是angular首创的，作为一种编程模式，它出现在1976年，比js还要古老得多。promise全称是 Futures and promises。

而在javascript世界中，一个广泛流行的库叫做Q 地址是https://github.com/kriskowal/q 而angular中的$q就是从它引入的。promise解决的是异步编程的问题，对于生活在同步编程世界中的程序员来说，它可能比较难于理解，这也构成了angular入门门槛之一，以下将用生活中的一个例子对此做一个形象的讲解。

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

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

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

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

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

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

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

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

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

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

好，我们再扩展一下这个故事：

张先生这次需要做一个桌子，三把椅子，一张席梦思，但是他不希望今天收到个桌子，明天收到个椅子，后天又得签收一次席梦思，而是希望家具厂做好了之后一次性送过来，但是他下单的时候又是分别下单的，那么他就可以重新跟家具厂要一个包含上述三个承诺的新承诺，这就是$q.all(桌子承诺，椅子承诺，席梦思承诺)，这样，他就不用再关注以前的三个承诺了，直接等待这个新的承诺完成，到时候只要一次性签收了前面的这些承诺就行了。

二、Promise形象讲解B

一天早晨，爹对儿子说：“宝儿，出去看看天气如何！”

每个星期天的早晨，爹都叫小宝拿着超级望远镜去家附近最高的山头上看看天气走势如何，小宝说没问题，我们可以认为小宝在离开家的时候给了他爹一个promise。

这时候，他爹就想了，如果明天艳阳高照，他就准备去钓鱼，如果天实在不行，就作罢，如果小宝对预报明天的天气也没底，他就在家宅一天哪也不去。

大概过了半小时，小宝回来了。每周的结果不尽相同：

A计划 ：天气晴朗

小宝不辱使命，说外面阳光明媚，万里无云，这个promise was resolved（小宝信守承诺），爹就可以收拾行装，钓鱼去鸟。

B计划： 小宝日观天象，阴转小雨的节奏

小宝依然不辱使命，但是天公不作美，promise was resolved，但是孩儿他爹觉得还是搁家呆着吧。

C计划：天象诡谲，小宝无法做出天气走势判断

小宝败兴而归，云雾重重，遮蔽了视线，不敢妄言天气走势，小宝走的时候立下承诺说要给他爹预报天气，但是没有成功，我们说promise was rejected！孩儿他爹决定小心驶得万年船，还是在家吧。

上述种种，用代码写出来是什么样子呢？

我们可以把孩儿他爹看成controller，小宝就是service。

整理逻辑：孩儿他爹让小宝去看天气，小宝不能立刻告诉他，但是孩儿他爹在等待结果的这段时间里可以抽抽烟，喝喝茶啥的，因为小宝承诺会把天气情况搞清楚。等小宝把天气预报带回来，他就可以决定下一步干啥。各位看官注意了：小宝登高望远看天气的时候并没有影响他爹干别的事情，这就是promise的妙处所在。

Angular里有个then()函数，我们可以决定孩儿他爹到底是用哪个计划(A，B，C)，then()接收两个functions作为参数，第一个在promise is resolved的时候执行，另一个在promise is rejected的时候执行

Controller: FatherCtrl

孩儿他爹掌控局面的代码如下：

// function somewhere in father-controller.js
 
    var makePromiseWithSon = function() {
 
        // This service's function returns a promise, but we'll deal with that shortly
 
        SonService.getWeather()
 
            // then() called when son gets back
 
            .then(function(data) {
 
                // promise fulfilled
 
                if (data.forecast==='good') {
 
                    prepareFishingTrip();
 
                } else {
 
                    prepareSundayRoastDinner();
 
                }
 
            }, function(error) {
 
                // promise rejected, could log the error with: console.log('error', error);
 
                prepareSundayRoastDinner();
 
            });
 
    };

Service: SonService

小宝的作用就是充当了一个service，他爬上山头看天象，有点类似调用weather API，而且还是异步调用，他得到的结果可能是个变量，也有可能出现异常情况(比如,返回500—>大雾弥漫)。

从”Fishing Weather API”返回一个promise，如果it was resolved，就格式化成{“forecase”:”good”}。

 // function somewhere in father-controller.js
 
    var makePromiseWithSon = function() {
 
        // This service's function returns a promise, but we'll deal with that shortly
 
        SonService.getWeather()
 
            // then() called when son gets back
 
            .then(function(data) {
 
                // promise fulfilled
 
                if (data.forecast==='good') {
 
                    prepareFishingTrip();
 
                } else {
 
                    prepareSundayRoastDinner();
 
                }
 
            }, function(error) {
 
                // promise rejected, could log the error with: console.log('error', error);
 
                prepareSundayRoastDinner();
 
            });
 
    };

总结

这个比喻向我们展示了异步的实质，孩儿他爹不会倚门等待儿子的归来，这段时间他完全可以自由活动。 孩儿他爹到底用哪个计划取决于(天气好/坏，没有成功预报)，小宝在临走的时候给他爹一个promise，就等他回来的时候决定是resolve还是reject。

小宝其实是在使用异步服务（观天象—调用weather API）来获取天气信息，孩儿他爹根本就不懂技术，坐等结果即可！

三、代码解析Promise

1、先来看一段Demo，看完这个demo你可以思考下如果使用$.ajax如何处理同样的逻辑，使用ng的promise有何优势？

var ngApp=angular.module('ngApp',[]);
 
/*******************************************************************
 
 * $q为内置服务
 
****************************************************************/
 
ngApp.factory('UserInfoService',['$http','$q',function($http,$q){
 
    return{
 
       query:function(){
 
        var defer=$q.defer();  //声明延后执行
 
        $http({method:'GET',url:'data/students.json'}).
 
        success(function(data,status,headers,config){
 
            defer.resolve(data);  //声明执行成功
 
            console.log('UserInfoService success');
 
        }).
 
        error(function(data,status,headers,config){
 
            defer.reject();      //声明执行失败
 
        });
 
        return defer.promise; //返回承诺，返回获取数据的API
 
        }
 
        }
 
    }]);
 
    ngApp.controller('MainCtrl',['$scope','UserInfoService',function($scope,UserInfoService){
 
     var promise = UserInfoService.query();  //同步调用，获取承诺接口
 
        promise.then(function(data){
 
            $scope.user=data;  //调用承诺接口resolove()
 
            console.log('MainCtrl ...');
 
            },function(data){
 
              $scope.user={error:'数据不存在。。。'}; //调用承诺接口reject();
 
            });
 
            }]);

2、什么是promise?

promise是一种用异步的方式处理值的方法，promise是对象，代表了一个函数最终可能的返回值或者抛出的异常，在与远程对象打交道时我们可以把他看作是远程对象的一个代理。 如果说是promise也是异步处理方式的一种，那么我们会想起它和XHR和$.ajax有啥区别呢？

习惯上js使用闭包或者回调来相应非同步返回的数据，比如页面加载之后的XHR请求。我们可以跟数据进行正常交互，就好像它已经返回了一样，而不需要依赖回调函数的触发。

那么ng提出的promise是为了解决什么问题呢？ 回调已经被使用了很长时间，通常如果有回调依赖其他还回调时将会时调试变得非常艰难，每一步调用之后都需要显示处理错误。与之不同的是promise提供了另外一个抽象：这些函数返回promise对象。

从一定层面上看ng改变的不是简单的改变代码风格，而是让我对一些思维习惯发起了反思和改善。

回调示例

User.get(fromId,{
 
    success:function(){
          user.friends.find(toId,function(){})
    },
    failure:function(){}
})

ng promise示例

User.get(fromId).
   then(function(user){
    },function(err){
 }).
   then(function(){},function(){});

3、为什么使用promise

使用了promise的收获之一是逃脱了回调的固定思维逻辑。promise让异步处理的机制看上去更像是同步，基于同步函数我们可以按照预期来捕获返回值和异常值。可以在程序中的任何时刻捕捉错误，并且绕过依赖于程序异常的后续代码，我们不需要思考这个同步带来的好处。因此使用promise的目的是：获取功能组合和错误冒泡能力的同时，保持代码异步运行的能力。

promise是头等对象，自带了一些约定。

只有一个resolve或者reject会被调用到。

如果promise被执行或者被拒绝了，依赖于他们的处理程序仍然会被调用。

处理程序总是会被异步调用。

4、如何创建promise

想要在angularjs中创建promise，可以使用内置的$q服务，$q服务在它的deferred API中提供了一些方法。

首先把它注入到你想使用它的对象中

angular.module('ngApp',[]).
 
factory('UserInfoService',['$q',function($q){
 
    //code here
 
}])

要创建一个deferred对象，可以调用defer()方法； var deferred= $q.defer();

deferred对象暴露了三个方法，以及一个可以用于处理promise的promise属性。

resolve(value)。 deferred.resolve({name:"Kobe",Age:36});

reject(reason)。 deferred.reject("Can't update user");

notify(value)。这个方法用promise的执行状态进行响应。

then(successFn,errFn,notifyFn)。

catch(errFn)。

finally(callback)。finally允许我们观察promise的执行或者拒绝，而无需修改结果的值。通常就做一些资源的清理工作。

5、链式请求

GitHubService.then(function(data){
 
}).then(function(data){
 
    $scope.Users=data;
 
});