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

本文轉載自查看原文 2018-01-10 17:15 1162 angular

$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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 AngularJS $q 和 $q.all 單個數據源和多個數據源合並（promise的說明）原創：形象的講解angular中的$q與promise 使用 Promise.all 同時發起多個請求 promise.all的使用 Promise.all( ) 的使用 Promise.all處理同步請求 Promise.all處理多個異步請求 promise.all 發送多個請求 Promise了解即Promise.all()的初步使用 3. vue_等多個請求執行完再執行下一個方法（Promise.all用法）