출력 결과가 이해되지 않습니다.
198
작성한 질문수 6
const promise = new Promise((resolve, reject) => {
// 비동기 작업을 실행하는 함수
// executor
setTimeout(() => {
console.log("안녕");
// resolve();
reject();
}, 2000);
});
console.log(promise);
setTimeout(() => {
console.log(promise);
}, 3000);첫 번째 console.log와 setTimeout에서의 두 번째 console.log는 promise객체의 상태가 달라야 한다고 생각하는데 왜 같은지가 궁금합니다.
답변 2
0
안녕하세요 이정환입니다.
직접 확인해보니 아래와 같이 첫번째 Promise 객체의 값은 pending 상태로, 두번째 Promise 객체의 값은 rejected로 잘 변경되어 나오는걸로 확인됩니다.
브라우저 콘솔 환경이 아닌 Node.js 에서 실행했을 때에도 다음과 같이 첫번째 Promise 객체는 pending 으로 출력되고 두번째 Promise 객체는 rejected를 호출해 실패했기 때문에 프로그램이 비정상 종료하는 걸 볼 수 있습니다.
결론적으로 두 Promise 객체의 상태는 다른 것으로 확인되는데요, 혹시 어떤 환경에서 어떤 방법을 통해 코드를 실행하셨을때 같은 결과로 도출되었는지 알려주시면 다시 확인 해 보겠습니다.
0
브라우저 콘솔 환경에서 진행했습니다. 저도 다시 확인해 보니 코드를 저장해서 새로 실행시킨 후에 첫 번째 promise 객체 출력에 대해서
두 번째 promise가 출력되기 전에 바로 프로퍼티를 열어보면 pending
두 번째 promise가 출려되는걸 전부 기다린 후에 첫 번째 출력의 프로퍼티를 열어어보니 rejected로 나왔습니다.
2번의 경우가 이런 식인데 지금 보니 미리보기는 pending이라 되어 있지만 state는 rejected라고 뜨네요.
1
아하 Promise의 최종 결과를 말씀하시는 것 이로군요
우선 cosole.log는 객체의 상태를 끝까지 추적하여 콘솔에 출력합니다. 따라서 시간에 따라 비동기적으로 변화하는 Promise 객체의 상태도 끝까지 추적되어 말씀하신것 처럼 프로퍼티를 열어 결과를 확인하실 수 있어요
이때 두 Promise 모두 결국 Rejected 상태로 변화하는 이유는 앞서 종료된 Promise를 처리하는 과정에서 명시적으로 reject를 호출해 예외를 발생하셨기 때문입니다. 예외가 발생한 그 순간 프로그램은 작동을 멈추기 위해 예정중이던 모든 작업을 실패로 처리하게 됩니다.
0
안녕하세요, 인프런 AI 인턴입니다. bestoon님.
비동기 프로그래밍에서 Promise 객체의 상태를 이해하는 것은 매우 중요합니다. 처음 console.log(promise);에서 출력되는 Promise 상태는 pending입니다. 이는 아직 비동기 작업이 완료되지 않았음을 의미합니다.
이후 두 번째 setTimeout 내의 console.log(promise);에서 출력되는 Promise 객체는 rejected 상태로 변경됩니다. 이는 reject() 함수가 호출되었기 때문입니다. Promise는 비동기적으로 상태가 변경되므로 setTimeout 내의 console.log(promise); 출력은 이미 reject된 상태를 나타냅니다.
관련된 유사한 질문과 답변이 다수 존재하므로, 자세한 예제를 직접 확인하고 싶다면 다음 게시물들을 참조하시기 바랍니다:
- promise 관련 질문 있습니다. - 유사한 promise 동작에 대한 설명을 다루고 있습니다.
- 두 코드의 차이점 - 비동기 코드 작동 방식에 대해 더 깊이 이해할 수 있습니다.
Promise 객체가 어떤 상황에서도 같은 객체로 나타나는 이유는 Promise의 상태 변경이 비동기적으로 이루어지며, 즉시 객체 자체가 변하지 않기 때문입니다. Promise는 다음 상태로 이행되거나 거부되기 전까지는 같은 상태로 유지됩니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useEffect와 lifecycle문의
0
31
2
프론트엔드 학습 수준 문의
0
43
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
51
2
데이터 로딩중 화면만 계속 나와요!!
0
56
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
80
2
이후의 커리큘럼 문의
0
102
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
50
2
최적화 관련 질문있습니다 (useMemo 등)
0
85
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
82
3
Date 객체에 관련하여 질문드립니다.
0
85
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
78
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
109
2
onMouseEnter 관련 문의 드립니다
0
93
3
배열의 렌더링 관련 질문 드립니다.
0
73
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
113
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
137
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
71
1
vs code 자동완성관련 문의
0
113
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
181
2
87강 필터 함수 질문
0
69
2
useRef, useState count 비교
0
67
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
91
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
76
2