비동기 처리에 사용되는 JQuery의 Promise 기능과 Deferred 객체

JQuery에는 여러 비동기 함수의 결과를 제어하기 위해 Deferred 객체를 사용한다.

 

const getList = function() {
	
	const deferred = $.Deferred();
	
	$.get(url, function(list){
	
		if (list != undefined) {
			deferred.resolve(list);
		} else {
			deferred.reject('error');
		}
	});
	
	return deferred.promise();
}

const getListCount = function() {
	
	const deferred = $.Deferred();
	
	$.get(url, function(count){
	
		if (list != undefined) {
			deferred.resolve(count);
		} else {
			deferred.reject('error');
		}
	});
	
	return deferred.promise();
}

const init = function() {
	
	let deferred = [];
	deferred.push(getList());
	deferred.push(getListCount());
	
	$.when.apply($, deferred).done(function(_list, _count) {
		
		if (_list != undefined) {
		
			_list.forEach(function(index, data) {
				let html =  '<tr>';
				html += ' <td>' + data.NUMBER + '</td>;
				html += ' <td>' + data.TITLE + '</td>;
				html += '</tr>';

				document.querySelector('table tbody').insertadjacenthtml('before', html);
			});
			
		}
		
		if (_count != undefined) {
			document.querySelector('.total-count').innerText = _count;
		}
	});
	
}