[javascript] 비동기 콜백 함수 세트를 어떻게 기다릴 수 있습니까?

코드에 대해 구체적이지 않았으므로 시나리오를 작성하겠습니다. 10 개의 ajax 호출이 있고 그 10 개의 ajax 호출의 결과를 누적하고 싶은데 모두 완료되면 무언가를하고 싶다고 가정 해 보겠습니다. 배열에 데이터를 축적하고 마지막 항목이 언제 완료되었는지 추적하여 이렇게 할 수 있습니다.

수동 카운터

var ajaxCallsRemaining = 10;
var returnedData = [];

for (var i = 0; i < 10; i++) {
    doAjax(whatever, function(response) {
        // success handler from the ajax call

        // save response
        returnedData.push(response);

        // see if we're done with the last ajax call
        --ajaxCallsRemaining;
        if (ajaxCallsRemaining <= 0) {
            // all data is here now
            // look through the returnedData and do whatever processing 
            // you want on it right here
        }
    });
}

참고 : 여기에서 오류 처리가 중요합니다 (Ajax 호출 방법에 따라 다르기 때문에 표시되지 않음). 하나의 ajax 호출이 오류로 인해 완료되지 않거나 오랜 시간 동안 멈춰 있거나 오랜 시간 후에 시간 초과되는 경우를 어떻게 처리 할 것인지 생각하고 싶을 것입니다.

---

jQuery 약속

2014 년 제 답변에 추가합니다. 요즘에는 jQuery가 $.ajax()이미 약속을 반환하고 약속 $.when()그룹이 모두 해결되고 반환 결과를 수집 할 때 알려주기 때문에 이러한 유형의 문제를 해결하는 데 약속이 자주 사용됩니다 .

var promises = [];
for (var i = 0; i < 10; i++) {
    promises.push($.ajax(...));
}
$.when.apply($, promises).then(function() {
    // returned data is in arguments[0][0], arguments[1][0], ... arguments[9][0]
    // you can process it here
}, function() {
    // error occurred
});

---

ES6 표준 약속

kba의 답변에 지정된대로 : 네이티브 promise가 내장 된 환경 (최신 브라우저 또는 node.js 또는 babeljs transpile 사용 또는 promise polyfill 사용)이있는 경우 ES6 지정 약속을 사용할 수 있습니다. 브라우저 지원 은 이 표 를 참조하십시오 . 약속은 IE를 제외한 거의 모든 현재 브라우저에서 지원됩니다.

경우 doAjax()약속 반환, 당신은이 작업을 수행 할 수 있습니다

var promises = [];
for (var i = 0; i < 10; i++) {
    promises.push(doAjax(...));
}
Promise.all(promises).then(function() {
    // returned data is in arguments[0], arguments[1], ... arguments[n]
    // you can process it here
}, function(err) {
    // error occurred
});

---

약속이없는 비동기 작업을 약속을 반환하는 작업으로 만들어야하는 경우 다음과 같이 “약속”할 수 있습니다.

function doAjax(...) {
    return new Promise(function(resolve, reject) {
        someAsyncOperation(..., function(err, result) {
            if (err) return reject(err);
            resolve(result);
        });
    });
}

그런 다음 위의 패턴을 사용하십시오.

var promises = [];
for (var i = 0; i < 10; i++) {
    promises.push(doAjax(...));
}
Promise.all(promises).then(function() {
    // returned data is in arguments[0], arguments[1], ... arguments[n]
    // you can process it here
}, function(err) {
    // error occurred
});

---

블루 버드 약속

Bluebird promise 라이브러리와 같이 기능이 더 풍부한 라이브러리를 사용하는 경우 이를 쉽게 수행 할 수 있도록 몇 가지 추가 기능이 내장되어 있습니다.

 var doAjax = Promise.promisify(someAsync);
 var someData = [...]
 Promise.map(someData, doAjax).then(function(results) {
     // all ajax results here
 }, function(err) {
     // some error here
 });