Angularjs angular js http请求在同一url的循环中不起作用

首先，我很抱歉我的英语不好。我是新来的。我在循环内部面临api调用问题。这是我的代码演示

    $http
    .get("http://localhost:8000/api/product-track/get-product-phase-item/" + item_id, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined, 'Process-Data': false}
    })
    .then(function(response){
        data = response.data.item_category;
        $scope.items = response.data.data;

        angular.forEach($scope.items, function(item){

            $http
                .get("http://localhost:8000/api/item/get-item-name/" + item.item_category_id, {
                    transformRequest: angular.identity,
                    headers: {'Content-Type': undefined, 'Process-Data': false}
                })
                .success(function (response) {
                    data = response;
                    console.log(data);

                });

        });


    });

现在，我将解释我在代码中面临的问题。我的第一个api调用非常完美。当我在循环内调用第二个api时，它也能完美地执行。但是当item.item\u category\u id的值相同时，我就面临了问题。那么我的api就不会按顺序调用。我不知道，我是否正确地解释了我的问题

我得到了一个例子。当我的循环执行5次并且URL为-

"

"

localhost:8000/api/item/get item name/5“

localhost:8000/api/item/get item name/4“

localhost:8000/api/item/get item name/4“

localhost:8000/api/item/get item name/6“

然后我得到的回应是：第一，第二，第三，第六，第四，第五。当id重复时，它不会按顺序响应。为什么我会面临这个问题。

---

谢谢…

从for循环中提取http调用，并将其放在单独的函数中。然后在foreach中调用该函数

原因是foreach中的项引用相同的内存，即使它创建了一个新的闭包。这就是为什么每次调用都引用相同的值

$http
    .get("http://localhost:8000/api/product-track/get-product-phase-item/" + item_id, {
        transformRequest: angular.identity,
        headers: {
            'Content-Type': undefined,
            'Process-Data': false
        }
    })
    .then(function(response) {
        data = response.data.item_category;
        $scope.items = response.data.data;
        angular.forEach($scope.items, function(item) {
            sendReq(item)
        });
    });

function sendReq(item) {
    $http
        .get("http://localhost:8000/api/item/get-item-name/" + item.item_category_id, {
            transformRequest: angular.identity,
            headers: {
                'Content-Type': undefined,
                'Process-Data': false
            }
        })
        .success(function(response) {
            data = response;
            console.log(data);
        });
}

或者，如果要一次性发送所有请求，则使用

$q.all

$http
    .get("http://localhost:8000/api/product-track/get-product-phase-item/" + item_id, {
        transformRequest: angular.identity,
        headers: {
            'Content-Type': undefined,
            'Process-Data': false
        }
    })
    .then(function(response) {
        data = response.data.item_category;
        $scope.items = response.data.data;
        $scope.fullArr = []
        angular.forEach($scope.items, function(item) {
            $scope.fullArr.push($http
                .get("http://localhost:8000/api/item/get-item-name/" + item.item_category_id, {
                    transformRequest: angular.identity,
                    headers: {
                        'Content-Type': undefined,
                        'Process-Data': false
                    }
                }));
        });
        sendReq()
    });

function sendReq() {
    $q.all(fullArr).then(function(response) {
        //response for all requests 
    });
}

---

显式同步调用。使用递归从上一个项的成功回调中获取该项

限制：如果在获取项目详细信息时任何调用失败，它也将阻止调用以获取后续的调用

要修复此限制，还可以从上一项的错误回调中调用下一项

示例如下：

$http
    .get("http://localhost:8000/api/product-track/get-product-phase-item/" + item_id, {
        transformRequest: angular.identity,
        headers: {
            'Content-Type': undefined,
            'Process-Data': false
        }
    })
    .then(function(response) {
        data = response.data.item_category;
        $scope.items = response.data.data;
        fetchItemsDetail(0); // start with 1st element (item)
    });

function fetchItemsDetail(itemIndex) {
    $http
        .get("http://localhost:8000/api/item/get-item-name/" + $scope.items[itemIndex].item_category_id, {
            transformRequest: angular.identity,
            headers: {
                'Content-Type': undefined,
                'Process-Data': false
            }
        })
        .success(function(response) {
            data = response;
            console.log(data);
            if ($scope.items.length - 1 > itemIndex)
                fetchItemsDetail(itemIndex + 1); // place call to fetch next item details
        })
        .error(function(error) {
            console.log(error);
            if ($scope.items.length - 1 > itemIndex)
                fetchItemsDetail(itemIndex + 1); // place call to fetch next item details even if this one fails
        });
}

---

因为所有请求都是同时发送的，第六个请求由服务器/网络处理的时间比第四个和第五个请求少。您不应该期望响应以相同的顺序返回。如果需要，请使用$q.all（）。我也不明白为什么所有6个响应处理程序都编写相同的数据变量。如果最后只保留其中一个请求的结果，为什么要并行发送6个请求？为什么要按顺序发送？在我看来，无论哪一个API调用最后完成，都会覆盖其他所有API调用返回的结果，因此（就像您的代码现在一样）您可以只调用这些API端点中的一个来获得类似的结果，而其他API端点只会浪费带宽。为什么？不知道如何按顺序获得响应@我希望它们是连续的。没有办法按顺序获得响应@尼古拉：你可以像萨切特·古普塔的回答那样把承诺连成链条，但你能解释一下为什么你希望它们井然有序吗？请记住，如果每个请求都需要1秒的时间才能返回，并且您的列表中有10个项目，那么您的用户就必须等待10秒才能准备好最后的数据。然而，如果并行进行，最后一个结果将在约1秒后准备就绪（给定与上述相同的条件）。之所以需要这些数据是连续的，唯一的原因是如果每个调用都依赖于上一次调用返回的数据。但是根据到目前为止您共享的代码，情况根本不是这样。很抱歉，您的代码在逻辑上与问题中的代码没有任何不同。为什么不呢？因为http是异步的，所以for循环不会等到响应。它一直在执行，这就是为什么它应该始终发送数组的最后一项。这根本不会改变这一点。为什么不能更具体一点呢？只需将对

$http

的调用移动到一个单独的函数，而不必等待。这完全按照问题中的代码执行。虽然这是他想要的，但你可以说他想要的并不是一个好主意。特别是如果项目列表很长的话。此外，他的数据仍然会被每个新请求覆盖，因此只有最后一个请求才有意义——除非请求有我们不知道的服务器端副作用。是的，尽管@Mahfuz Shishir有一个有点不合时宜的要求，这将对性能产生重大影响，但是的，这个解决方案可以为他工作。