For 루프에서 비동기 가져 오기 - 결과 (완료) 변수에 액세스

Question

저는 비동기 JS에 익숙하지 않습니다. 모든 쿼리가 완료된 경우에만 생성 된 배열에서 작업을 시작하는 방법에 대한 질문이 있습니다. for 루프에서 페이지를 가져옵니다. 그건 내 코드입니다 :

var allOrgReposData = []; 
 
var repoContributorsUrls = []; 
 
for (var i=1; i <= orgPageIterations; i++) { 
 
    var orgReposUrl = 'https://api.github.com/orgs/angular/repos?page='+i; 
 
    fetch(orgReposUrl) 
 
    .then(response => response.json()) 
 
    .then(orgReposData => { 
 
    allOrgReposData = allOrgReposData.concat(orgReposData); 
 
    console.log(allOrgReposData); 
 
    }) 
 
}

당신은 allOrgReposData 배열이 루프에 만들었지 만 스크립트,이 배열에 뭔가를하려고하면 내 작업 있도록 모든 반복에 표시를 할 수 있습니다 볼 수 있듯이 exapmle (페이지의 30 개 항목)에 대한 실행 시간 대신에 다중화됩니다 : 30; 60; 90; 120; 150; 대신에 171 = 621 171.

마무리 가져 오기를 "대기"하고 이것을 사용하지 않고 배열에 액세스 할 수 있습니까? "곱셈"?

인사말!

Answer 1

당신은 모든 약속이 완료 될 때까지 대기하는 Promise.all를 사용할 수 있습니다

var allOrgReposData = []; 
 
var repoContributorsUrls = []; 
 

 
var promises = []; 
 
let orgPageIterations = 1; 
 

 
for (var i = 1; i <= orgPageIterations; i++) { 
 
    let orgReposUrl = 'https://api.github.com/orgs/angular/repos?page=' + i; 
 
    promises.push(fetch(orgReposUrl).then(response => response.json())); 
 
} 
 

 
Promise.all(promises) 
 
    .then(data => { 
 
    allOrgReposData = data; 
 
    console.log(allOrgReposData); 
 
    }) 
 
    .catch(err => console.error(err));

블록 범위 지정을 위해 var orgReposUrl을 let orgReposUrl으로 변경했습니다.

Answer 2

당신은 당신이 변수로 한 통화의 수를 추적 할 수 :

var allOrgReposData = []; 
var repoContributorsUrls = []; 
var callSuccess = 1; //Variable keeping track of your ajax calls 
for (var i=1; i <= orgPageIterations; i++) { 
    var orgReposUrl = 'https://api.github.com/orgs/angular/repos?page='+i; 
    fetch(orgReposUrl) 
    .then(response => response.json()) 
    .then(orgReposData => { 
    allOrgReposData = allOrgReposData.concat(orgReposData); 
    console.log(allOrgReposData); 
    callSuccess++; //Increment your var for each call 

    if(callSuccess == orgPageIterations){ //If every call has already been made, then continue 
     //DO YOUR THING HERE 
    } 
    }) 
} 

이