예제에서 여러 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; 
} 

productFactory

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

return service; 

내 목표는 개체로 numOfProduct 요소의 각각에 HTTP 요청 결과를 밀어하는 것입니다 같은 것을 가지고있다. 그러나, 내가 가진 HTTP 요청 코드로 그렇게 할 수 없습니다. 아무도 그것에 대해 나를 도울 수 있습니까? 정말 고마워!

1 당신이 아니라 i의 값 i에 대한 참조를 결합하고 공통의 콜백 문제 :

Answer 1

당신은 위의 두 가지 문제가 있습니다. 따라서 콜백이 호출 될 때까지 루프가 완료되고 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을 사용하는 것이 좋습니다. 이 문제를 해결하는 데 도움이 필요하면 알려주십시오.