Question

首先，我很抱歉我的英语不好。我是角度js的新手。我在循环中遇到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_category_id 的值相同时，我面临着问题。然后我的api没有按顺序调用。我不知道，我是否正确解释了我的问题。

我有一个例子。当我的循环执行5次并且网址为 -

时

http://localhost:8000/api/item/get-item-name/2＆＃34;
http://localhost:8000/api/item/get-item-name/4＆＃34;
本地主机：8000 / API /项目/获取项目名/ 5＆＃34;
本地主机：8000 / API /项目/获取项目名/ 4＆＃34;
本地主机：8000 / API /项目/获取项目名/ 4＆＃34;
本地主机：8000 / API /项目/获取项目名/ 6＆＃34;

然后我得到的回答首先是1然后是2然后是3然后是6然后是4然后5.当id重复时它不会顺序响应。为什么我遇到了这个问题。感谢...

Answer 1

明确同步通话。使用递归从上一项的成功回调中获取项目。

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

要解决此限制，您也可以从前一项的错误回调中调用下一项。

以下示例：

$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
        });
}

Answer 2

从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 
    });
}

angular js http请求在循环中不能用于相同的url

2 个答案: