AngularJS - 等待多个资源查询完成

AngularJS

使用AngularJS时，我们经常会遇到需要等待多个资源查询完成后再继续执行的情况。这种情况下，我们可以使用Promise和$q服务来解决这个问题。

在AngularJS中，Promise是一种表示异步操作结果的对象。$q服务是AngularJS提供的一个用于创建和管理Promise的服务。通过$q服务，我们可以创建一个Promise对象，并在其中注册需要等待的异步操作。当所有异步操作都完成时，Promise对象会被标记为已完成状态，并触发相应的回调函数。

下面是一个简单的例子，演示了如何使用$q服务来等待多个资源查询完成：

Javascript
angular.module('myApp', [])
  .controller('myController', function($scope, $q) {
    $scope.loadData = function() {
      var promises = [];
      // 模拟异步操作
      var promise1 = $q(function(resolve, reject) {
        setTimeout(function() {
          resolve('数据1');
        }, 2000);
      });
      var promise2 = $q(function(resolve, reject) {
        setTimeout(function() {
          resolve('数据2');
        }, 3000);
      });
      var promise3 = $q(function(resolve, reject) {
        setTimeout(function() {
          resolve('数据3');
        }, 1500);
      });
      promises.push(promise1);
      promises.push(promise2);
      promises.push(promise3);
      $q.all(promises)
        .then(function(results) {
          // 所有异步操作完成后的回调函数
          console.log(results); // 输出 ['数据1', '数据2', '数据3']
        })
        .catch(function(error) {
          // 异步操作出错后的回调函数
          console.error(error);
        });
    };
  });

在上述代码中，我们首先创建了三个模拟的异步操作，每个操作都返回一个Promise对象。然后，我们使用$q.all方法来等待所有的Promise对象完成。在所有异步操作完成后，$q.all会返回一个新的Promise对象，该对象的状态为已完成。我们可以使用.then方法来注册这个新Promise对象的回调函数，在回调函数中处理所有异步操作的结果。

案例代码解析

- 首先，我们创建了一个AngularJS的应用程序，并定义了一个控制器"myController"。

- 在控制器中，我们使用$q服务的构造函数来创建了三个Promise对象，分别用于模拟三个异步操作。

- 接着，我们将这三个Promise对象添加到一个数组中。

- 最后，我们使用$q.all方法来等待所有Promise对象完成，并在完成后触发回调函数。

使用AngularJS的$q服务可以方便地管理多个异步操作，并在所有操作完成后执行相应的回调函数。通过使用Promise对象，我们可以更好地控制和管理异步操作的流程。这种方式使得我们的代码更加简洁和可读，并提高了应用程序的性能和用户体验。

参考代码

html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <Meta charset="UTF-8">
  <title>等待多个资源查询完成</title>
  <script src="Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular.min.JS">https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular.min.JS</a>"></script>
  <script>
    // 在这里添加上述的案例代码
  </script>
</head>
<body ng-controller="myController">
  <button ng-click="loadData()">加载数据</button>
</body>
</html>

在上述代码中，我们创建了一个AngularJS应用程序，并在页面上添加了一个按钮。当点击按钮时，会触发控制器中的loadData函数，从而开始执行异步操作。最后，我们可以在浏览器的控制台中看到异步操作的结果。

参考链接：

- [AngularJS - 等待多个资源查询完成](https://www.runoob.com/AngularJS/AngularJS-wAIt-multiple-resource-queries.html)