🧙‍♀️

[JS] async & await


asyncawait 키워드를 사용하면 프로미스를 훨씬 쉽게 사용할 수 있다. 특히 비동기 모델을 마치 동기 모델인 것처럼 표현 가능하기 때문에 코드 가독성이 훨씬 좋다.

async

1async function f() {
2 return 1;
3}

함수 앞에 async를 붙이면 그 함수는 항상 프로미스를 반환한다. 프로미스가 아닌 값을 반환하더라도 resolved 프로미스로 값을 감싸 반환한다. 물론, 명시적으로 프로미스를 반환할 수도 있다.

1f().then(console.log);
2// -> 1

async 키워드는 클래스의 메서드에도 사용 가능하다.

await

awaitasync 함수 안에서만 동작한다.

1// async 함수 안 어딘가
2// ...
3let value = await promise;
4// ...

자바스크립트는 await를 만나면 말 그대로 프로미스가 처리될 때까지 함수 실행을 기다리게 한다. 결과는 그 이후 반환된다. 프로미스가 처리되길 기다리는 동안엔 엔진이 다른 일을 할 수 있기 때문에 CPU 리소스가 낭비되지 않는다.

await는 프로미스가 정상적으로 이행되면, 프로미스 객체의 result에 저장된 값을 반환한다. 프로미스가 reject 되면 throw문을 작성한 것처럼 에러가 던져진다. 던져진 에러는 try...catch를 사용해 잡을 수 있다.

asyncawait 모두 근본은 프로미스이기 때문에 프로미스를 잘 이해하자.


참조: ko.javascript.info