javascript - 如何获取我的示例中的多个http请求结果？

Question

我正在尝试发出一个 http 请求并将返回的结果放入我的数组中。

我有类似的东西

Ctrl

for (var i=0; i < numOfProduct.length; i++) {
   productFactory.makeRequest(numOfProduct[i].id)
                    .then(function(data) {
                        console.log(i)
                        //always output 10 which is my numOfProduct.length

                        numOfProduct[i].push({detail: data}); 
                        //i got Cannot read property 'push' of undefined error
                    })
                $scope.numOfProduct = numOfProduct;
}

产品工厂

service.makeRequest = function(id) {
    return $http.get('/api/product/get' + id);
}

return service;

我的目标是将 http 请求结果作为对象推送到每个 numOfProduct 元素中。但是，我似乎无法使用我拥有的 http 请求代码来做到这一点。谁能帮我解决这个问题吗？非常感谢!

Answer 1

您对上述内容有两个问题:

1 是一个常见的回调问题，您将引用绑定(bind)到 i，但没有绑定(bind)到 i 的值。因此，当您的回调被调用时，循环将完成，并且您绑定(bind)的所有回调中的 i 将为 10。

解决此问题的一种方法是通过函数调用强制计算 i:

function makeCallback(productId) {
 productFactory.makeRequest(productId)
                    .then(function(data) {
                        console.log(i)
                        return ({detail: data}); 
                    });
} 

第二个问题是您正在对数组 numOfProduct 中的特定值而不是实际数组调用 .push。 (除非该特定值是一个数组，我假设它不是一个数组，因为您在该值上调用 .id)

试试这个:

function makeCallback(productId) {
     productFactory.makeRequest(productId)
                        .then(function(data) {
                            console.log(i)
                            return ({detail: data}); 
                        })
}
var array = [];
for (var i=0; i < numOfProduct.length; i++) {    
    array.push(makeCallback(numOfProduct[i].id));
}
$scope.numOfProduct = array;

如果每个循环都是异步运行的，那么我建议使用流行的 async libary 。如果您需要任何设置帮助，请告诉我。