angular中$q用法, $q多个promise串行/同步/等待）， $q.all用法,使用

$q的基本用法

function fn() {
    var defer = $q.defer();
    setTimeout(function () {
        console.log(1);
        defer.resolve(6);
    }, 2000);
    return defer.promise;
}

fn().then(function (data) {
    console.log(data); //2000ms后打印6
}).catch(function (err) {
    console.error(err);
});
//或者用$q.when(fn()), 和上面是同样的效果
$q.when(fn()).then(function (data) {
    console.log(data);
}).catch(function (err) {
    console.error(err);
});

$q多个promise串行

function f1() {
    var defer = $q.defer();
   setTimeout(function() {
       defer.resolve(1);
   }, 2000);
   return defer.promise;
}

function f2() {
    var defer = $q.defer();
    setTimeout(function() {
        defer.resolve(2);
    }, 2000);
    return defer.promise;
}

function f3() {
    var defer = $q.defer();
    setTimeout(function() {
        defer.resolve(3);
    }, 2000);
    return defer.promise;
}

//f1进行完，在进行f2，然后进行f3，后一个程序等待前一个完成
f1().then(function (data) {
    console.log(data);  // 2s后打印1
    return f2();
}).then(function (data) {
    console.log(data);   // 再过2s后打印2
    return f3();
}).then(function (data) {
    console.log(data);　　// 再过2s后打印3
});

$q.all

$q.all是用于执行多个异步任务进行回调，它可以接受一个promise的数组，或是promise的hash(object)。任何一个promise失败，都会导致整个任务的失败。

$q.all中接收多个promise是同时进行的。

例1：接受一个promise的hash(object)：

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title></title>
  <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
  <div ng-controller="ctrl1">
  </div>
  <script>
    var app = angular.module('app',[]);
    app.controller('ctrl1',['$scope','$q',function($scope,$q){
      var deferA = $q.defer();
      setTimeout(function(){
        deferA.resolve('this is DATA A')
      },500);
      var deferB = $q.defer();
      setTimeout(function(){
        deferB.resolve('this is DATA B');
      },1000);
      var p=$q.all({
        dataA:deferA.promise,
        dataB:deferB.promise
      })
      p.then(function(result){
        console.log(result.dataA); // this is DATA A
        console.log(result.dataB); // this is DATA B
      })
      .catch(function(error){
        console.error(error);
      })
    }])

  </script>
</body>
</html>

例2：接受一个promise数组：

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title></title>
  <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
  <div ng-controller="ctrl1">
  </div>
  <script>
    var app = angular.module('app',[]);
    app.controller('ctrl1',['$scope','$q',function($scope,$q){
      var deferA = $q.defer();
      setTimeout(function(){
        deferA.resolve('this is DATA A')
      },500);
      var deferB = $q.defer();
      setTimeout(function(){
        deferB.resolve('this is DATA B');
      },1000);
      var p=$q.all([
        deferA.promise,
        deferB.promise
      ]);
      p.then(function(result){
        console.log(result[0]); // this is DATA A
        console.log(result[1]); // this is DATA B
      })
      .catch(function(error){
        console.error(error);
      })
    }])

  </script>
</body>
</html>

参考：http://blog.csdn.net/shidaping/article/details/52398925

posted @ 2018-01-10 17:15  井凉一一  阅读(2299)  评论(0)    收藏  举报