기본 콘텐츠로 건너뛰기

라벨이 async-await인 게시물 표시

자바스크립트 Promise를 상태 흐름과 실행 순서로 이해하기

자바스크립트 Promise를 상태 흐름과 실행 순서로 이해하기 빠른 답 Promise는 비동기 작업의 성공 값이나 실패 이유를 나중에 전달하기 위한 객체입니다. 상태는 pending 에서 fulfilled 또는 rejected 로 한 번만 바뀌며, 이후 다시 바뀌지 않습니다. then , catch , finally 콜백은 현재 동기 코드가 끝난 뒤 마이크로태스크로 실행됩니다. 복잡한 비동기 흐름은 긴 then 체인보다 async/await 와 좁은 범위의 try/catch 로 나누면 읽기 쉬워집니다. 목차 시간 흐름으로 이해하기 흐름으로 보기 값, 상태, 오류를 나눠 보기 Promise 생성자는 언제 실행될까 상태는 한 번만 결정된다 에러 전파와 catch의 의미 여러 작업을 조합할 때의 차이 then 체인과 async await 디버깅할 때 자주 보는 신호 흔한 오해 시간 흐름으로 이해하기 생성 시점 new Promise(...) 가 실행되면 executor 함수는 즉시 실행됩니다. → 대기 시점 아직 결과가 정해지지 않은 Promise는 pending 상태입니다. → 결정 시점 resolve 또는 reject 중 먼저 호출된 쪽으로 결과가 정해집니다. → 예약 시점 then , catch , finally 콜백은 마이크로태스크 큐에 등록됩니다. → 실행 시점 현재 동기 코드가 끝난 뒤 예약된 콜백이 실행됩니다. Promise를 “비동기니까 전부 나중에 실행되는 코드”로만 이해하면 콘솔 출력 순서가 자주 헷갈립니다. Promise 생성자 안의 executor는 동기적으로 실행됩니다. 나중에 실행되는 쪽은 Promise의 결과를 관찰하는 then , catch , finally 콜백입니다. 이 차이를 구분하면 상태 전환, 에러 전파, Promise.all 같은 조합 메서드의 동작을 더 차분하게 따라갈 수 있습니다. 흐름으로 보기 흐름 다이어그램 이 흐름에서 중요한 지점은 “작업이 시작되는 시점”과 “결과를 받는 콜백이 실행되...