프로미스는 모든 동기 작업을 완료한 후에 실행할 수 있다.
아래 예시에서 then 후속 처리 메서드에 넘긴 console.log는 절대 실행되지 않는다
new Promise((resolve) => {
console.log('1'); // 동기 영역
resolve('2');
}).then(console.log); // 비동기 영역
let i = 0;
while (true) {
i += 1;
}
프로미스 생성자에 넘긴 콜백 함수는 동기적으로 처리하므로 콘솔에 1을 출력한다. resolve 함수가 실행되면 프로미스는 이행(fulfilled) 상태가 되고 결과 값과 함께 새로운 프로미스를 리턴한다. 그럼 then 후속 처리 메서드로 실행 턴이 넘어간다. 여기서부터 비동기 영역이기 때문에 바로 실행되지 않는다.
프로미스 다음 코드엔 i를 1씩 증가시키는 무한 루프가 기다리고 있다. 이 무한 루프 때문에 then 후속 처리 메서드가 실행되지 않는 것이다. 이처럼 프로미스는 모든 동기 작업을 완료해야만 실행된다.
같은 턴에 수행할 작업이 많다면 Async/Await를 사용하기 보단 프로미스를 이용해 다음 턴으로 미룰 수도 있다.
login() // TURN 1
.then(() => {
changeUI(); // TURN 2
return updateProfile();
})
.then(() => {
reloadPage(); // TURN 3
})
위 코드는 아래 과정으로 실행된다. 각 턴(Turn)은 모든 동기 작업이 끝날 때까지 기다린다. 즉, 동기 작업을 마친 후 프로미스를 실행할 수 있는 타이밍이 왔을 때 비로소 실행된다.
login() 실행——— 동기 작업 실행 ———
changeUI() updateProfile() 실행——— 동기 작업 실행 ———
reloadPage() 실행