중첩된 약속 실행 순서

Question

중첩된 약속에 대해 읽다가 튜토리얼에서 이 코딩 문제를 발견했습니다. 이 코드의 실행 순서를 설명할 수 있는 사람이 있나요?

new Promise((resolve) => {
    새로운 약속((res) => {
        console.log("c");
        해결(3);
        입술(2);
    }).then((응답) => console.log(응답))
}).then((res) => console.log(res));
<p>이 코드를 실행했는데 결과는 다음과 같습니다.</p>
<pre class="brush:php;toolbar:false;">c
2
3

그러나 저는 다음과 같은 결과가 나올 것으로 예상했습니다.

c
삼
2

외부 약속이 먼저 해결되고 내부 약속이 나중에 해결되기 때문입니다.

Answer 1

Nicholas의 답변 외에도 식별자 'res'를 반복적으로 사용하여 문제가 발생할 수 있습니다. 내부적으로 Promise의 첫 번째 사용은 Promise에 값 2를 반환하는 콜백 함수입니다. 마지막 줄의 두 번째 사용은 다른 범위에 있으며 외부 Promise의 .then() 메서드에 대한 매개 변수 이름으로 사용됩니다. 상황을 명확히 하기 위해 마지막 줄의 'res'를 'outerPromiseResult'로 바꾸면 도움이 될 수 있습니다.

Answer 2

간단히 말하면 전화하는 순서 때문이에요 .then.

으아악

위 코드에서는 외부 함수를 즉시 호출하는 외부 생성자를 입력합니다. 그런 다음 내부 Promise를 생성하고 내부 함수를 호출합니다. 내부 함수는 "c"를 기록한 다음 외부 Promise를 3으로 확인하고 내부 Promise를 2로 확인합니다.

이 시점에서 2개의 해결된 Promise가 있지만 이를 사용하려는 코드는 없습니다.

으아악

내부 Promise 구성이 끝나면 내부 Promise에서 .then를 호출합니다. Promise가 해결되었으므로 마이크로태스크 실행을 대기열에 추가합니다.

으아악

외부 Promise 구성이 끝나면 외부 Promise에서 .then를 호출합니다. Promise가 해결되었으므로 마이크로태스크 실행을 대기열에 추가합니다.

이제 모든 동기 코드 실행이 완료되었습니다. 호출 스택이 비어 있고 마이크로태스크가 실행되기 시작합니다. 이는 선입 선출 순서로 실행되므로 내부 Promise와 관련된 마이크로 작업이 먼저 실행되고 레코드 2가 됩니다. 그런 다음 나머지 마이크로태스크를 실행하고 3을 기록합니다.