• angular学习笔记(二十九)-$q服务


    angular中的$q是用来处理异步的(主要当然是http交互啦~).

    $q采用的是promise式的异步编程.什么是promise异步编程呢? 

    异步编程最重要的核心就是回调,因为有回调函数,所以才构成了异步编程,而回调有三个关键部分:

    一是什么时候执行回调,二是执行什么回调,三是回调执行的时候传入什么参数.

    就以最常见的jquery Ajax举例,发送一个请求后:

    什么时候执行回调: 请求成功(或者失败)的时候

    执行什么回调: 根据请求成功或者失败,执行相应的回调函数

    回调执行的时候传入的什么参数: 也就是后台返回的数据

    在过去大多数场景下,我们的异步编程都是这样的格式:

    function a(callback1,callback2){
        var bool;
        var data;
        /*a函数要做的事情,做完后会判断bool是true还是false,并且给data赋值*/;
        
        //a函数完事儿,根据a函数的执行结果执行相应的回调函数 
        if(bool){
            callback1(data)     
        }
        if(!bool){
            callback2(data)
        } 
    }
    
    a(function(data){
        /*回调函数1的处理*/
    },function(data){
        /*回调函数2的处理*/
    }
    )

    运行: http://jsfiddle.net/s2ebjon0/

    这个例子只有一次回调,但如果回调中还要嵌套回调:

    function a(callback1,callback2){
        var bool;
        var data;
        /*a函数要做的事情,做完后会判断bool是true还是false,并且给data赋值;*/
        bool=true;
        data='code_bunny'
        
        //a函数完事儿,根据a函数的执行结果执行相应的回调函数 
        if(bool){
            callback1(data,function(data){
                console.log('success:'+data)
            },function(data){
                console.log('fial:'+data)
            })     
        }
        if(!bool){
            callback2(data)
        } 
    }
    
    a(function(data,callback1,callback2){
        alert('成功'+data);
        var dataNew;
        var bool;
        dataNew = data;
        bool = false;
        if(bool){
            callback1(data)
        }
        if(!bool){
            callback2(data)
        }
        
    },function(data){
        /*回调函数2的处理*/
        alert('失败'+data)
    }
    )

    运行: http://jsfiddle.net/kbyy73dn/1/ 

    我就不接着写如果回调中嵌套回调再嵌套回调再...

    总之一句话,使用传统的回调函数作为参数来编写方式来实现异步,是十分麻烦的,代码可读性十分的差.而promise式的编程则把这个过程抽象化,只关注上面说到的三个关键点(什么时候执行回调,执行什么回调,回调执行的时候传入什么参数),在这篇文章不关心它究竟是如何做到的,只关心它是怎么使用的:

    promise式异步有两个重要的对象,一个defer对象,一个promise对象,每个defer对象都有和它绑定的promise对象,他们之间的关系是一一对应的.defer对象负责告知promise对象什么时候执行回调,执行什么回调,回调执行的时候传入什么参数,而promise对象负责接收来自defer对象的通知,并且执行相应的回调.

    举个最简单的例子:

    var HttpREST = angular.module('Async',[]);
    
    
    HttpREST.controller('promise',function($q,$http){
    //创建了一个defer对象;
    var defer = $q.defer();
    //创建了defer对象对应的promise
    var promise = defer.promise;
    //promise对象定义了成功回调函数,失败回调函数
    promise.then(function(data){console.log('成功'+data)},function(data){console.log('失败'+data)});

    //对promise发起通知: 1.执行这段代码的时候就是执行回调的时候, 2.调用resolve方法,表示需要被执行的是成功的回调, 3.resolve里的参数就是回调执行的时候需要被传入的参数
    defer.resolve(
    'code_bunny') });

    下面来看下$q的完整api

    $q的方法:

    一. $q.defer():

    返回一个对象.一般把它赋值给defer变量:

    var defer = $q.defer()

    ※defer的方法:

      (一)defer.resolve(data)

          对promise发起通知,通知执行成功的回调,回调执行的参数为data

      (二)defer.reject(data)

          对promise发起通知,通知执行失败的回调,回调执行的参数为data

      (三)defer.notify(data)

          对promise发起通知,通知执行进度的回调,回调执行的参数为data

    ※defer的属性:

      (一)defer.promise

      ※defer.promise的属性:

        1.defer.promise.$$v

               promise的$$v对象就是对应的defer发送的data,当defer还没有发送通知时,$$v为空.

               有一点很重要,假设,我们令$scope.a = defer.promise,那么页面在渲染{{a}}时,使用的是a.$$v来渲染a这个变量的.并且修改a变量,视图不会发生变化,需要修改a.$$v,视图才会被更新,具体请参考:

               http://www.cnblogs.com/liulangmao/p/3907307.html

      ※defer.promise的方法:

        1.defer.promise.then([success],[error],[notify]):

               .then方法接受三个参数,均为函数,函数在接受到defer发送通知时被执行,函数中的参数均为defer发送通知时传入的data.

               [success]: 成功回调,defer.resolve()时调用

        [error]: 失败回调,defer.reject()时调用

        [notify]: 进度回调,defer.notify()时调用

               .then()方法返回一个promise对象,可以接续调用.then(),注意,无论.then()是调用的success函数,还是error函数,还是notify函数,发送给下一个promise对象的通知一定是成功通知,而参数则是函数的返回值.也就是说,then()方法里的函数被执行结束后,即为下一个promise发送了成功通知,并且把返回值作为参数传递给回调.

        eg1: (单次调用)

               html:          

    <!DOCTYPE html>
    <html ng-app = 'Async'>
    <head>
      <title>19. $q异步编程</title>
      <meta charset="utf-8">
      <script src="angular.js"></script>
      <script src="script.js"></script>
    </head>
    <body>
    <div ng-controller = "promise">
      <h3>{{name}}</h3>
    </div>
    </body>
    </html>

        js:

    var HttpREST = angular.module('Async',[]);
    
    //defer.resolve(),defer.reject(),defer.notify()
    HttpREST.controller('promise',function($q,$http,$scope){
        var defer = $q.defer();         //创建了一个defer对象;
    
        var promise = defer.promise;    //创建了defer对象对应的promise
    
        promise.then(function(data){$scope.name='成功'+data},function(data){$scope.name='失败'+data},function(data){$scope.name='进度'+data});
    
        $http({
            method:'GET',
            url:'/name'
        }).then(function(res){
            defer.resolve(res.data)
        },function(res){
            defer.reject(res.data)
        })
    });

        如果正确创建后台对于'/name'的请求处理,在一秒后返回'code_bunny',则一秒后页面显示:

        如果后台没有创建对于'/name'的请求处理,则页面直接显示:

               eg2: (链式调用)

        html:          

    <!DOCTYPE html>
    <html ng-app = 'Async'>
    <head>
      <title>19. $q异步编程</title>
      <meta charset="utf-8">
      <script src="angular.js"></script>
      <script src="script.js"></script>
    </head>
    <body>
    <div ng-controller = "promise">
      <h3>{{name}}</h3>
      <h3>{{name2}}</h3>
    </div>
    </body>
    </html>

          js:    

    var HttpREST = angular.module('Async',[]);
    
    //.then()的链式调用
    HttpREST.controller('promise',function($q,$http,$scope){
        var defer = $q.defer();         //创建了一个defer对象;
    
        var promise = defer.promise;    //创建了defer对象对应的promise
    
        promise.then(function(data){
            $scope.name='成功'+data;
            return data+'2'
        },function(data){
            $scope.name='失败'+data;
            return data+'2'
        },function(data){
            $scope.name='进度'+data;
            return data+'2'
        }).then(function(data){
            $scope.name2 = '成功'+data
        },function(data){
            $scope.name2 = '失败'+data
        });
    
        $http({
            method:'GET',
            url:'/name'
        }).then(function(res){
            defer.resolve(res.data)
        },function(res){
            defer.reject(res.data)
        })
    });

        如果正确创建后台对于'/name'的请求处理,在一秒后返回'code_bunny',则一秒后页面显示:,可以看到,第一个.then()的成功的回调返回的data+'2'这个值,被传到了下一个.then()的成功回调的data参数中

        如果后台没有创建对于'/name'的请求处理,则页面直接显示:,可以看到,就算第一个.then()调用的是失败回调,但是它发给下一个promise的通知依然是成功通知,data值就是失败回调的返回值

        2.defer.promise.catch([callback])          

        相当于.then(null,[callback])的简写. 直接传入失败回调.返回一个promise对象.发给下一个promise对象的通知依然是成功通知.data值就是回调的返回值.            

               *很早的angualr版本是没有这个方法的. 

               eg:

        html:   

    <!DOCTYPE html>
    <html ng-app = 'Async'>
    <head>
      <title>19. $q异步编程</title>
      <meta charset="utf-8">
      <script src="angular.js"></script>
      <script src="script.js"></script>
    </head>
    <body>
    <div ng-controller = "promise">
      <h3>{{name}}</h3>
      <h3>{{name2}}</h3>
    </div>
    </body>
    </html>

        js:

    //.catch()
    HttpREST.controller('promise', function ($q, $http, $scope) {
        var defer = $q.defer();         //创建了一个defer对象;
    
        var promise = defer.promise;    //创建了defer对象对应的promise
    
        promise.catch(function (data) {
            $scope.name = data;
            return data+2
        }).then(function (data) {
                $scope.name2 = '成功' + data
            }, function (data) {
                $scope.name2 = '失败' + data
            });
    
        $http({
            method: 'GET',
            url: '/name'
        }).then(function (res) {
                defer.resolve(res.data)
            }, function (res) {
                defer.reject(res.data)
            })
    });

        后台不创建'/name'的get请求响应, 得到的结果如下: 

               可以看到,promise对象收到通知,执行失败回调,然后返回新的promise,对新的promise来说,收到的通知还是执行成功回调.回调的参数是catch里的函数的返回值.如果写成:         

        promise.then(null,function (data) {
            $scope.name = data;
            return data+2
        }).then(function (data) {
                $scope.name2 = '成功' + data
            }, function (data) {
                $scope.name2 = '失败' + data
            });

        两者是完全一致的.

               注意,如果后台正确创建了'/name'的get请求响应, 那么,得到的结果会是:

               也就是说,catch()方法如果收到的通知不是执行失败回调,而是执行成功回调,它直接返回一个promise对象进行链式调用,等于把成功通知传给了下一个promise.

               由于catch([callback])方法得到的和.then(null,[callback])方法是完全一致的,代码上也米有精简多少,所以一般就直接用.then就好了.

        3.defer.promise.finally([callback])

               .finally只接受一个回调函数,而且这个回调函数不接受参数.无论defer发送的通知是成功,失败,进度,这个函数都会被调用.

               .finally也返回一个promise对象,和上面两个方法不同的是,它为下一个promise对象发送的通知不一定是成功通知,而是传给finally的通知类型.也就是说,如果defer给promise发送的是失败通知,那么,finally()得到的promise它收到的也会是失败通知,得到的参数也不是finally的返回值,而是第一个defer发出的通知所带的data.

                *很早的angualr版本是没有这个方法的. 

                eg:

         html:

    <!DOCTYPE html>
    <html ng-app = 'Async'>
    <head>
      <title>19. $q异步编程</title>
      <meta charset="utf-8">
      <script src="angular.js"></script>
      <script src="script.js"></script>
    </head>
    <body>
    <div ng-controller = "promise">
      <h3>{{name}}</h3>
      <h3>{{name2}}</h3>
    </div>
    </body>
    </html>

         js:

    //.finally()
    HttpREST.controller('promise', function ($q, $http, $scope) {
        var defer = $q.defer();         //创建了一个defer对象;
    
        var promise = defer.promise;    //创建了defer对象对应的promise
    
        promise.finally(function () {
            $scope.name = '已接收通知';
    return 'code_dog';
    }).then(function (data) { $scope.name2 = '成功' + data }, function (data) { $scope.name2 = '失败' + data }); $http({ method: 'GET', url: '/name' }).then(function (res) { defer.resolve(res.data) }, function (res) { defer.reject(res.data) }) });

        后台不创建'/name'的get请求响应, 得到的结果如下: 

        后台正确创建'/name'的get请求响应, 得到结果如下:

        可以看到,当promise收到通知的时候执行了fianlly里的回调,然后返回的promise收到的通知和第一个promise收到的通知是一致的,不会受到finally中的回调的任何影响.

               -------------------------------------------------------------------------------------------------------------------------------------------------------

               

    二. $q.reject(data):

               这个方法(在我的认知范围里),就只能在promise的.then(funciton(){})函数里面调用.作用是给.then()返回的下一个promise发送错误信息,并且给错误回调传入参数data

               eg1:(.then方法里使用)

        html:

    <!DOCTYPE html>
    <html ng-app = 'Async'>
    <head>
      <title>19. $q异步编程</title>
      <meta charset="utf-8">
      <script src="angular.js"></script>
      <script src="script.js"></script>
    </head>
    <body>
    <div ng-controller = "promise">
      <h3>{{name}}</h3>
      <h3>{{name2}}</h3>
    </div>
    </body>
    </html>

        js:

    HttpREST.controller('promise', function ($q, $http, $scope) {
        var defer = $q.defer();         //创建了一个defer对象;
    
        var promise = defer.promise;    //创建了defer对象对应的promise
    
        promise.then(function (data) {
            return $q.reject(data+'2')
        },function(){
            return $q.reject(data+'2')
        }).then(function (data) {
                $scope.name2 = '成功' + data
            }, function (data) {
                $scope.name2 = '失败' + data
            });
    
        $http({
            method: 'GET',
            url: '/name'
        }).then(function (res) {
                defer.resolve(res.data)
            }, function (res) {
                defer.reject(res.data)
            })
    });

        后台正确创建'/name'的get请求响应时,得到的结果是:

        后台没有正确创建'/name'的get请求响应时,得到结果:

        可以看到,在then()方法的函数中,用$q.reject(data)来包装返回值,可以给下一个返回的promise发送失败通知并发送data参数.所以无论promise收到的是成功通知还是失败通知,下一个promise收到的都是失败通知.

        eg2:(.finally方法里调用)

        html:

    <!DOCTYPE html>
    <html ng-app = 'Async'>
    <head>
      <title>19. $q异步编程</title>
      <meta charset="utf-8">
      <script src="angular.js"></script>
      <script src="script.js"></script>
    </head>
    <body>
    <div ng-controller = "promise">
      <h3>{{name}}</h3>
      <h3>{{name2}}</h3>
    </div>
    </body>
    </html>

        js:

    HttpREST.controller('promise', function ($q, $http, $scope) {
        var defer = $q.defer();         //创建了一个defer对象;
    
        var promise = defer.promise;    //创建了defer对象对应的promise
    
        promise.finally(function () {
            return $q.reject('code_dog')
        }).then(function (data) {
                $scope.name2 = '成功' + data
            }, function (data) {
                $scope.name2 = '失败' + data
            });
    
        $http({
            method: 'GET',
            url: '/name'
        }).then(function (res) {
                defer.resolve(res.data)
            }, function (res) {
                defer.reject(res.data)
            })
    });

        无论后台是否正确创建'/name'的get请求响应,得到结果都是:.因为.finally()的回调是不能接受到data参数的.所以返回值都是一样.

        上面已经说过,使用.finally方法的时候,回调是不能接受参数的,回把对promise发的通知原封不动的(成功失败,data)发送给下一个promise对象.

        但是,如果我在.finally的回调里用$q.reject(data)来包装了返回值,那么发送给下一个promise的通知会以$q.reject(data)为准,也就是'失败通知',回调参数为data.

            

    三. $q.all([promise1,promise2,...]):

               $q.all接受一个数组类型的参数,数组的值为多个promise对象.它返回一个新的promise对象.

               当数组中的每个单一promise对象都收到了成功通知,这个新的promise对象也收到成功通知(回调参数是一个数组,数组中的各个值就是每个promise收到的data,注意顺序不是按照单个promise被通知的顺序,而是按照[promise1,promise2]这个数组里的顺序)

               当数组中的某个promise对象收到了失败通知,这个新的promise对象也收到失败通知,回调参数就是单个promise收到的失败通知的回调参数

        eg:

               html:

    <!DOCTYPE html>
    <html ng-app = 'Async'>
    <head>
      <title>19. $q异步编程</title>
      <meta charset="utf-8">
      <script src="angular.js"></script>
      <script src="script.js"></script>
      <style type="text/css">
        h4 {
          color:red
        }
      </style>
    </head>
    <body>
    <div ng-controller = "promise">
      <h3>{{name1}}</h3>
      <h3>{{name2}}</h3>
      <h3>{{age1}}</h3>
      <h3>{{age2}}</h3>
      <h4>{{three}}</h4>
    </div>
    </body>
    </html>

        js:

    //$q.all()
    HttpREST.controller('promise', function ($q, $http, $scope) {
        var defer1 = $q.defer();         //创建了一个defer1对象;
    
        var promise1 = defer1.promise;    //创建了defer1对象对应的promise1
    
        var defer2 = $q.defer();         //再创建了一个defer2对象;
    
        var promise2 = defer2.promise;    //创建了新的defer2对象对应的promise2
    
        //promise1收到通知后执行的回调:给name1和name2赋值
    promise1.then(
    function (data) { $scope.name1 = data; return data+'.2' },function(data){ $scope.name1 = data; return data+'.2' }).then(function (data) { $scope.name2 = 'promise1成功' + data }, function (data) { $scope.name2 = 'promise1失败' + data });
    //promise2收到通知后执行的回调:给age1和age2赋值 promise2.then(
    function (data) { $scope.age1 = data; return data+'.2' },function(data){ $scope.age1 = data; return data+'.2' }).then(function (data) { $scope.age2 = 'promise2成功' + data }, function (data) { $scope.age2 = 'promise2失败' + data });
    //创建一个promise3,它依赖于promise1和promise2
    var promise3 = $q.all([promise1,promise2]); promise3.then(function(data){ $scope.three = data; },function(data){ $scope.three = data; }); $http({ method: 'GET', url: '/name' }).then(function (res) { defer1.resolve(res.data) }, function (res) { defer1.reject(res.data) }); $http({ method: 'GET', url: '/age' }).then(function (res) { defer2.resolve(res.data) }, function (res) { defer2.reject(res.data) }) });

        (1)后台node正确创建两个get请求的响应:

    app.get('/name',function(req,res){
        setTimeout(function(){res.send('code_bunny')},2000)
    });
    
    app.get('/age',function(req,res){
        setTimeout(function(){res.send('18')},1000)
    });

        一秒后显示:

               两秒后显示:

        可以看到,当promise1和promise2都收到成功通知后,promise3也收到成功通知,而它的回调的参数data就是一个数组,数组里的两个值分别是promise1收到的data和promise2收到的data,注意顺序,这里先收到通知的是promise2,但是promise3的data数组里值的顺序和promise收到通知的顺序无关.只和$q.all([])这个数组里的顺序一致.

        (2)后台node只创建了'/name'一个get请求的响应:

        

        显示结果:

               可以看到,由于'/age'请求错误,promise2被通知失败,所以promise3也立刻被通知失败,收到的data参数也和promise2收到的data一致

    四. $q.when(obj,[success],[error],[notify]):

               .when接受四个参数,其中,第二,第三,第四个参数都是函数,相当于promise.then()里面的三个参数. 第一个参数有两种可能:

               1. 第一个参数不是promise对象: 直接调用成功回调,回调的参数就是第一个参数本身

        eg:

        html:

    //$q.when()
    HttpREST.controller('promise', function ($q, $http, $scope) {
    
        $q.when('code_dog',function(data){
            $scope.name = data;
            return data+'2'
        },function(data){
            $scope.name = data;
            return data+'2'
        }).then(function (data) {
            $scope.name2 = '成功' + data
        }, function (data) {
            $scope.name2 = '失败' + data
        });
    
    });

        显示结果:

        .when()的第一个参数不是promise对象,而是字符串'code_dog',所以它直接执行成功回调,也会返回下一个promise进行链式调用, 和一般的.then()是没有区别的.

                在这种情况下其实不需要传入第三,第四个参数,因为第一个参数如果不是promise,那么它只会执行成功回调.            

               2. 第一个参数是一个promise对象: 

                   当这个promise对象收到通知的时候,调用回调.回调就是第二,三,四个参数...(相当于.then([success],[error],[notify]))

                   另外,.when()返回的对象也就相当于.then()返回的对象.都是一个新的promise对象,都可以接收到回调发送的通知和参数...

                   可以理解为,

                   var defer = $q.defer(); 

                   defer.promise.then([success],[error],[notify])

                   这一段也可以写成: 

                   var defer = $q.defer();

                   $q.when(defer.promise,[success],[error],[notify])

            eg:

            html:

    <!DOCTYPE html>
    <html ng-app = 'Async'>
    <head>
      <title>19. $q异步编程</title>
      <meta charset="utf-8">
      <script src="angular.js"></script>
      <script src="script.js"></script>
    </head>
    <body>
    <div ng-controller = "promise">
      <h3>{{name}}</h3>
      <h3>{{name2}}</h3>
    </div>
    </body>
    </html>

          js:

    //$q.when()
    HttpREST.controller('promise', function ($q, $http, $scope) {
        var defer = $q.defer();         //创建了一个defer对象;
    
        var promise = defer.promise;    //创建了defer对象对应的promise
    
        $q.when(promise,function(data){
            $scope.name = data;
            return data+'2'
        },function(data){
            $scope.name = data;
            return data+'2'
        }).then(function (data) {
            $scope.name2 = '成功' + data
        }, function (data) {
            $scope.name2 = '失败' + data
        });
        
        /* 这样写得到的结果也是等价的.    
        promise.then(function(data){
            $scope.name = data;
            return data+'2'
        },function(data){
            $scope.name = data;
            return data+'2'        
        }).then(function (data) {
            $scope.name2 = '成功' + data
        }, function (data) {
            $scope.name2 = '失败' + data
        });
        */
    
        $http({
            method: 'GET',
            url: '/name'
        }).then(function (res) {
            defer.resolve(res.data)
        }, function (res) {
            defer.reject(res.data)
        });
    
    });

          和注释掉的那一段写法完全等价.

                     所以,在这种情况下.when()只是对.then()的一个包装.

    最后,api里面说到:defer对象发送消息不会立即执行的,而是把要执行的代码放到了rootScope的evalAsync队列当中,当时scope.$apply的时候才会被promise接收到这个消息。

    虽然不太明白这段话的意思,个人理解是大多数时候,scope是会自动$apply的...如果在什么时候遇到promise没有收到通知,那么就试试看scope.$apply执行一下.

    完整代码:https://github.com/OOP-Code-Bunny/angular/tree/master/OREILLY/19%20%24q%E5%92%8Cpromise 

  • 相关阅读:
    CentOS 6.4下Squid代理服务器的安装与配置
    从C++到objectivec[转]
    在Objectivec里面使用property教程【转】
    Socket常用的数据结构【转】
    iOS 5 Storyboard 学习之 Tabbar Controller,Navigation Controller (1)
    Linux Socket编程(不限Linux)
    重要的套接字函数[转]
    HTTP,TCP/IP
    网络编程socket之bind函数[转]
    linux 下遍历目录中的目录项
  • 原文地址:https://www.cnblogs.com/liulangmao/p/3907571.html
Copyright © 2020-2023  润新知