들어가기 전, 프라미스(promise 객체)에 대해 잠깐 알고 가자!
-'Promise'는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환한다.
async function f() {
return 1;
}
function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다.
프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다.
await는 꼭! async가 우선되어야 한다!
let value = await promise;
JS는 await 키워드를 만나면 프라미스가 처리될 때까지 기다린다.
await는 프라미스가 처리될 때까지 함수 실행을 기다리게 만든다.
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("완료!"), 1000)
});
let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)
alert(result); // "완료!"
}
f();
프라미스가 처리되면 그 결과와 함께 실행이 다시 시작된다.
프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트 실행, 이벤트 처리, ...)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않는다.