마이크로태스크
프라미스 핸들러 .then/catch/finally는 항상 비동기적으로 실행된다.
프라미스가 즉시 이행되더라도 .then/catch/finally 아래에 있는 코드는 핸들러들이 실행되기 전에 실행된다.
let promise = Promise.resolve();
promise.then(() => alert("프라미스 성공!"));
alert("코드 종료");예시를 실행하면 프라미스가 즉시 이해앙태가 되었음에도 '코드 종료', '프라미스 성공!' 순으로 출력되는 것을 볼 수 있다.
마이크로태스크 큐
ECMA에선 PromiseJobs라는 내부 큐(internal queue)를 명시하고 있다. V8 엔진에선 '마이크로태스크 큐(microtask queue)라고 부른다.
명세서에 따르면
- 마이크로태스크 큐는 먼저 들어온 작업을 먼저 실행한다.(FIFO, first-in-first-out)
- 실행할 것이 아무것도 남아있지 않을 때만 마이크로태스크 큐에 있는 작업이 실행되기 시작한다.
요약하자면, 어떤 프라미스가 준비되었을 때 이 프라미스의 .then/catch/finally 핸들러가 큐에 들어간다고 생각하면 된다. 이때 핸들러들은 여전히 실행되지 않고 스크립트 실행이 끝나야 자바스크립트 엔진은 큐에 저장된 핸들러를 꺼내 실행한다.
여러 개의 .then/catch/finally를 사용해 만든 체인의 경우, 각 핸들러는 비동기적으로 실행된다. 큐에 들어간 핸들러 각각은 현재 코드가 완료되고 큐에 적재된 이전 핸들러의 실행이 완료되었을 때 실행된다.
그렇다면 "프라미스 성송!", "코드 종료" 순으로 출력하게 하려면 어떻게 해야 할까?
방법은 아주 간단하다. 실행 순서가 중요한 경우 .then을 사용해 큐에 넣으면 된다.
Promise.resolve()
.then(() => alert("프라미스 종료!"))
.then(() => alert("코드 종료");