[JavaScript] async, await 그리고 promise

JavaScript는 기본적으로 비동기 처리를 한다. 비동기 처리란 실행하는 함수의 반환 값을 기다리지 않고 코드의 다른 작업을 수행하겠다는 의미다. 따라서 JavaScript에서는 기본적으로 프로그램의 실행 순서를 보장할 수 없다.

하지만 작업의 선후, 즉 프로그램의 실행 순서를 반드시 보장해야 하는 경우가 발생한다. 이러한 경우 JavaScript에서는 프로그램의 실행 순서를 보장하기 위해서 아래 예의 'function(user)'와 같이 콜백callback 함수를 사용한다.

function logName(){
	fetchUser('abc.com/users/1', function(user) {
		if(user.id == 1){
			console.log(user.name);
		}
	});
}

 

만약 콜백 함수가 또 다른 콜백 함수를 호출한다면 콜백의 깊이가 깊어져 코드가 한 눈에 들어오지 않게 된다. JavaScript에서는 이러한 경우에 코드를 간결하게 표현할 수 있도록 async, await 지시자를 제공한다. 위의 콜백 함수 예를 async와 await를 사용해서 아래와 같이 다시 작성할 수 있다.

async function logName(){
	var user = await fetchUser('abc.com/user/1');
	if(user.id == 1){
		console.log(user.name);
	}
}

 

내용을 해석해 보면 아래와 같다.

① fetchUser('abc.com/user/1'): 서버에서 사용자 이름을 가져오고
② await: fetchUser(...) 함수가 반환되는 것을 기다렸다가
③ if(user.id == 1){...}: await 아래 내용을 수행한다.

 

await 지시자가 지시하는 함수는 반드시 Promise를 반환값으로 가져야한다. await 구문은 Promise가 fulfill되거나 reject될 때까지 async 함수의 실행을 일시 정지하고, Promise가 fulfill되면 async 함수를 일시 정지한 부분부터 실행하게 된다. 만약 Promise가 reject되면, await 문은 reject된 값을 throw한다.

 

여기서 async 함수는 await구문, 즉 비동기 처리 과정을 포함하는 함수다. await 구문은 해당 구문이 지시하는 promise가 반환(resolve 또는 reject)될 때까지 async 함수의 실행을 정지시킨다. 따라서 await 키워드는 async 함수에서만 유효하며 async 함수 외부에서 사용하면 SyntaxError가 발생한다.

 

내용을 요약하면 아래와 같다.

· await 지시자가 지시하는 함수는 반드시 Promise를 반환값으로 가져야한다.

· await 구문은 해당 구문이 지시하는 Promise가 반환(resolve 또는 reject)될 때까지 async 함수의 실행을 정지시킨다.

 

■