Question

我正在尝试创建一个 Ionic 应用程序，为此我必须在for循环中发出一些 HTTP GET 请求，但看起来angular不会等待显示它们之前的数据。

这是我正在使用的代码。

$http.get(ApiUrl.get() + '/Threads' + '?access_token=' + $scope.userToken + filterString + "&filter[order]=created%20desc")
.success(function(data, status, headers, config) {

    var i=0;

    for(thread in data)
    {
        $scope.threadObj = data[i];
        var threadId = $scope.threadObj.id;
        $scope.threadPostNumber;

        //On récupére chaque nombre de post
        $http.get(ApiUrl.get() + '/Threads/' + threadId + '/posts/count' + '?access_token=' + $scope.userToken)
            .success(function(data, status, headers, config) {
                $scope.threadPostNumber = data.count;
            })
            .error(function(data, status, headers, config) {
                alert("Connection error, please try again.");
                $location.path("/app/carte");
            });

        $scope.threadObj.count = $scope.threadPostNumber;
        $scope.threads[i] = $scope.threadObj;

        i++;
    }
})
.error(function(data, status, headers, config) {
    alert("Connection error, please try again.");
    $location.path("/app/carte");
});

完成第一个 HTTP get并且数据可以在foreach中显示但是当我尝试使用第二个get请求将原始数据添加到原始数据时没有创建任何内容或者有时只创建最后一个数据显示每个值。

Answer 1

问题源于API调用是异步的，并且比for循环慢得多。

#past-cover { float: right; } #past-cover:after{ display:table; clear:both; content:""; } #past-cover img { float:none; display:block; } #past-cover-mobile img { float:none; display:none; } #past-label { background-color:blue; margin:0px; width:auto; display:block; float:none; }发布请求，但在for循环完成很久之后才会收到响应。因此，承诺成功回调中的$http.get将在以下内容中分配后设置：

$scope.threadPostNumber

因此，这项任务实际上毫无用处。

为了修复，请使用尾递归或Promise objects 为了使电话连续。

您还可以正确范围当前线程对象，以便在promise成功时您将修改正确的线程：

$scope.threadObj.count = $scope.threadPostNumber

因为它使用$http.get(ApiUrl.get() + '/Threads' + '?access_token=' + $scope.userToken + filterString + "&filter[order]=created%20desc") .success(function(data, status, headers, config) { data.forEach(function(thread, i) { $scope.threads[i] = thread; var threadId = thread.id; $http.get(ApiUrl.get() + '/Threads/' + threadId + '/posts/count?access_token=' + $scope.userToken) .success(function(data, status, headers, config) { $scope.threads[i].count = data.count; }) .error(function(data, status, headers, config) { alert('Connetion error, please try again.'); $location.path('/app/carte'); }); }); }) .error(function(data, status, headers, config) { alert("Connection error, please try again."); $location.path("/app/carte"); });（see the MDN page），forEach和thread的范围限定在函数中，所以对于该函数的生命周期以及它调用的任何函数或创建（如承诺成功回调），i和thread将保留传递给函数的值。这确保了无论HTTP请求返回什么顺序，您都将在正确的线程上设置i。

内部的API调用for angular in angular

1 个答案: