냐냐한 IT/냐냐한 JavaScript

for 문으로 ajax 여러 번 호출, 모든 호출이 끝난 후 처리

소소하냐 2022. 1. 11. 22:31

for 문으로 ajax 여러 번 호출, 모든 호출이 끝난 후 처리 

var precessData = []; 
var processCount = 0;

precessData.push(1);
precessData.push(2);
precessData.push(3);

var processCount = precessData.length;
var areaResult = document.getElementById('areaResult');

for (var i = 0; i < precessData.length; i++) {
	callAjax(precessData[i]);
}

function callAjax(data) {
    $.ajax({
        type: 'POST',
        url: '호출URL',
        data: JSON.stringify({ data: data }),
        dataType: 'json',
        contentType: 'application/json; characterset=utf-8',
    }).done(function (data) {
        areaResult.innerHTML += '<p>done '+data+'</p>';
    }).fail(function (err) {
        areaResult.innerHTML += '<p>fail '+data+'</p>'; // 현재 url이 정상적이지 않으므로 무조건 fail
    }).always(function () {
        processCount--;
        areaResult.innerHTML += '<p>always '+processCount+'</p>';
        // 모든 ajax 호출이 완료되면 마지막으로 처리 
        if (processCount == 0) {
            // 처리할 내용  
            areaResult.innerHTML += '<p>모든 작업이 처리되었습니다.</p>';						
        }
    });
}

결과 화면 

해당 내용 jsfiddle로 확인 [새창]