자바스크립트 비동기 함수(async function)의 순차 실행

개발을 하다 보면 비동기 함수(asynchronous function)를 순차적으로 반복 호출해야할 경우가 있습니다. 구글에서 sequential ajax call 같은 검색어로 검색을 해 보면 많은 자료들이 나옵니다. promise 라이브러리나 jQuery의 Deferred를 이용하는 방법이 있습니다. jQuery로 ajax 호출을 여러 번 해야하는 경우니까 그냥 jQuery의 Deferred를 사용하는 방법을 일단 적어봅니다.

제가 사용할 예제는 실제로 순차적으로 호출해야할 이유는 없습니다. 순차 실행을 위해 간단히 만든 예입니다. 

월마트 검색 API는 상점 번호와 키워드를 주면 해당 상점에 대한 키워드 검색 결과를 반환합니다. grill이라는 검색어와 상점 번호 ['3400', '1401', '1003']를 이용한다고 해봅시다. 월마트 API는 https://search.mobile.walmart.com/search?query=[검색어]&store=[상점번호] 형식으로 호출하면 됩니다.

var stores = ['3400', '1401', '1003'];

function getItems(stores) {
	var store = stores.shift();
  
 	if (!store) {
 		return $.Deferred().resolve().promise();
	} 
  
	return $.ajax(`https://search.mobile.walmart.com/search?query=grill&store=${store}`)
 		.done(function(body) {
 			$('#status').append(`
${store}: ${body.results.length} items
`);
		})
		.then(function() {
			$('#status').append(`
${stores.length} stores left
`);
			return getItems(stores);
		})
	;
}

$(document).ready(function() {
	getItems(stores)
		.then(function() {
			$('#status').append('getItems() finished');
		})
	;
})

getItems 함수는 넘겨받은 stores 배열의 크기가 0이 될 때까지 재귀호출을 합니다. 

10행에서 월마트 상점 검색을 합니다. 

11-13행은 검색 후 상점에 몇 개의 물건이 있는지 <div id="status"> 태그에 기록을 추가합니다.

14-17행은 getItems 함수를 또 호출합니다.

6-8행은 재귀호출 종료조건을 심사하고 최종 반환 값을 결정합니다. 먼저 jQuery의 Deferred 객체를 만들고, 실행이 완료 되었으니 resolve()로 상태를 변경하고, promise를 반환 합니다.

최초 실행은 22행에서 하고 모든 실행이 끝나면 23-25행이 실행됩니다.

위의 예제는 아래의 jsfiddle에서 실행이 가능합니다.