[javascript] Java Script 의 비동기 처리에 대해 알아봅시다

 

 

안녕하세요.

 

javascript 를 사용해보신 분이라면 거의 대부분의 사람들이 익숙하지 않고 어려움을 겪는 건 역시 비동기 처리일텐데요.

 

 

오늘은 악명 높은 Promise와 async, await을 사용한 비동기 처리에 대해 간단히 정리해보는 시간을 가져봅시다.

• async와 await

javascript의 asycn, await은 예상외로 이해하기 쉽고 사용법도 어렵지 않습니다.

 

우선은 async 키워드입니다.

 

async는 function 앞에 위치하도록 작성하게 됩니다.

 

async function add(a, b) {
	return a + b;
}

 

function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환하게 됩니다.

 

명시적으로 Promise를 작성하지 않아도, Promise가 아닌 값을 반환하더라도 이행 상태의 Promise로 값을 감싸 이행된 Promise가 반환되도록 합니다.

 

다음으로는 await 키워드입니다.

 

await 문법은 아래와 같습니다.

 

async function f() {
	let promise = new Promise((resolve, reject) => {
    	setTimeOut(() => resolve("완료!"),1000)
});
	let result = await promise; // Promise 가 이행될 때 까지 기다린다.
    
    alert(result); // "완료!"
}

f();

 

함수를 호출하고 await 키워드를 사용한 라인에서 setTimeOut()으로 설정한 1초간 Promise를 이행한 후에 alert 처리가 됩니다. 

 

말 그대로 await 키워드는 Promise가 처리될 때까지  '기다리자'를 의미하는 거죠.

 

(주의!)

 

• 일반 함수엔 await을 사용할 수 없습니다.

async 함수가 아닌데 await 을 사용하면 문법 에러가 발생합니다.

fuction f() {
	let promise = Promise.resolve(1);
    let result = await promise; // Syntax error
}

앞서 설명드린 바와 같이 await 키워드는 async 함수 안에서만 동작합니다.

 

• await 은 최상위 레벨 코드에서 작동하지 않습니다.

await을 최상위 레벨 코드에서 사용하는 실수를 종종 하곤 합니다.

 

아래 예시와 같은 코드는 동작하지 않습니다.

 

let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();

 

최상위 레벨에서 await을 사용하고 싶은 경우 아래와 같이 익명의 async 함수로 코드를 감싸면 사용할 수 있습니다!

 

(async () => {
	let response = await fetch('/article/promise-chaining/user.json');
    let user = await response.json();
    ...
})();

 

오늘은 async와 await 키워드의 개념과 사용법에 대해 알아보았습니다.

 

처음 접했을 때는 복잡하고 어려운 개념이었지만, 사용해 볼수록 유용하고 코드 리딩이 쉬운 문법인 것 같습니다.

 

여기까지 오늘 포스팅을 마칩니다.

 

감사합니다!