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

时间：2021-04-05 10:10:12

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',则一秒后页面显示:angular学习笔记(二十九)-$q服务

　　　　如果后台没有创建对于'/name'的请求处理,则页面直接显示:angular学习笔记(二十九)-$q服务

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',则一秒后页面显示:angular学习笔记(二十九)-$q服务,可以看到,第一个.then()的成功的回调返回的data+'2'这个值,被传到了下一个.then()的成功回调的data参数中

　　　　如果后台没有创建对于'/name'的请求处理,则页面直接显示:angular学习笔记(二十九)-$q服务,可以看到,就算第一个.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请求响应, 得到的结果如下: angular学习笔记(二十九)-$q服务

可以看到,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请求响应, 那么,得到的结果会是:angular学习笔记(二十九)-$q服务

也就是说,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请求响应, 得到的结果如下: angular学习笔记(二十九)-$q服务

　　　　后台正确创建'/name'的get请求响应, 得到结果如下:angular学习笔记(二十九)-$q服务

　　　　可以看到,当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请求响应时,得到的结果是:angular学习笔记(二十九)-$q服务

　　　　后台没有正确创建'/name'的get请求响应时,得到结果:angular学习笔记(二十九)-$q服务

　　　　可以看到,在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请求响应,得到结果都是:angular学习笔记(二十九)-$q服务.因为.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)

});

　　　　一秒后显示:angular学习笔记(二十九)-$q服务

两秒后显示:angular学习笔记(二十九)-$q服务

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

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

　　　　

　　　　显示结果:angular学习笔记(二十九)-$q服务

可以看到,由于'/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

    });

});

　　　　显示结果:angular学习笔记(二十九)-$q服务

　　　　.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

相关文章