Angular $q.all()的使用方法

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

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


<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数组:


<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>

都比较好用!推荐原文作者

你可能感兴趣的:(angular,promise,$q)