请问使用angularjs如何在for循环里面循环多次回调?

var app = angular.module('app', []);
    app.controller('appctrl', ['$http', '$q', function($http, $q) {
        function aaa(id) {
            var deferferred = $q.defer();
            $http({
                method: 'get',
                url: 's' + id + '.html'
            }).then(function(res) {
                deferred.resolve(1);
            })
            return deferred.promise;
        }
        var b = [0,1, 2, 3, 4, 5, 6, 7, 8, 9];
        var c = [];
        for (var i = 0; i < b.length; i++) {
            var promise = aaa(b[i]);
            promise.then(function(res) {
                c.push(res);
            })
        }
        console.log(c)
    }])

请问,如何让for循环中的promise全部完成后,取到所有的res,保存在c里?

阅读 6.3k
5 个回答
for  循环是马上走下去的。所以要跳出循环等promise执行完了才玩下走。
了解下 async中的await  可以在中for循环使用await  
当js遇到await会暂时跳出循环。等await执行完了。才继续往下执行。
如果有多个await 会一个个的执行。
async function aaa() {
 ////
  for (var i = 0; i < b.length; i++) {
    await fun();//要循环执行的函数
  }
}

是这样吗?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <!-- <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> -->
</head>
<body ng-app="app" ng-controller="appctrl">
<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('appctrl', ['$http', '$q', function($http, $q) {
        function aaa(id) {
            var deferred = $q.defer();
            $http({
                method: 'get',
                url: id + '.php' //加载 php 网页
            }).then(function(res) {
                deferred.resolve(res.data);//返回获取到的值
            })
            return deferred.promise;
        }
        var b = [0,1, 2];
        var c = [];
        for (var i = 0; i < b.length; i++) {
            var promise = aaa(b[i]);
            promise.then(function(res) {
                c.push(res);
            })
        }
        console.log(c)
    }])
</script>  
</body>
</html>

其中 0.php 代码是

<?php
echo "00";
?>

其中 1.php 代码是

<?php
echo "11";
?>

其中 2.php 代码是

<?php
echo "22";
?>

返回的结果是

clipboard.png

jquery中有个when方法,接受的参数就是Deferred对象。
伪代码:

$.when(...defers).done((res)=>dosomething(res));

当然你这里只需要在c每次push值之后判断c的length就行了,如果c的length等于b的length。那么就可以认为所有promise已完成

推荐你用$q.all
简单用法

$q.all([promise1, promise2])
.then(res => {
    // res[0], promise1 的结果
    // res[1], promise2 的结果
})

文档:https://docs.angularjs.org/api/ng/service/$q

用q.all方法可以解脱你的痛苦

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题