[JavaScripts] Promise객체의 동작방식

💡 Synchronous VS Asynchronous

• Synchronous: 동기적으로 순차적으로 실행되는 프로그램
• Asynchronous: 비동기적으로 실행되는 프로그램

btn.addEventListener('click', () => {});

이미 이벤트 리스너를 등록하고 사용하는 과정에서, 비동기적인 실행이 되고 있던 것이다.

 

📌 Promise

 

🍕 성훈이가 피자집에 가서 피자를 주문을 했고, 요리사가 진동벨로 알려준다고 진동벨을 주었다.

요리사는 성훈이의 주문 포함 여러 개의 주문이 밀려있을 것이다.

• 진동벨이 파란색이면 음식이 정상적으로 나온 것이고,
• 진동벨이 빨간색이면 음식 조리에 문제가 생긴 것이다.

 

1. 성훈이(Consumer),
2. 요리사(producer),
3. 주문(producing code)
4. 진동벨(promise)
5. 파란색(resolve→value) : value=피자, 즉 결괏값
6. 빨간색(reject→error) : 에러발생
7. 빨간색에 대한 후속조치(consuming code) : 다른 메뉴를 시킬 것인지 등의 예외처리를 한다.
8. 빨간색, 파란색(State) : 상태를 이야기한다.

 

📌 promise를 사용하기 위해서는 promise 객체를 만들어준다, 객체 안에 있는 함수는 “실행함수”로써 객체가 실행될 때 같이 실행된다.

즉, promise 객체를 생성하는 건 성훈이가 주문을 하고 요리사가 요리를 “바로”시작하는 상황

 

⭐ 위 그림을 보자,

 

promise 객체는 state, result를 가지고 있고,

 

resolve는 state, result,

 

reject도 state, result를 가지고 있다.

 

만약 작업이 성공적으로 실행이 되었다면, promise객체의 state는 fulfilled, result는 value로 바뀔 것이고.

 

실패를 했다면, state는 rejected, result는 error로 바뀔 것이다.

 

let promise = new Promise((resolve, reject) => {
    let success = true; // 예시로 성공 조건을 true로 설정
    if (success) {
        resolve('작업 성공!');
    } else {
        reject('작업 실패 ㅠㅠ');
    }
});

promise
    .then(result => {
        console.log(result); // '작업이 성공적으로 완료되었습니다' 출력
    })
    .catch(error => {
        console.log(error); // '작업이 실패하였습니다' 출력
    });

 

⭐ 이제 위 코드를 보자, 작업이 성공적으로 완료가 되었다면

 

sucess를 true로 설정을 해서 무조건 resolve('작업성공!') 이 부분이 필연적으로 실행이 될 것이고. resolve 내부의 value는 "작업성공!" 이라는 값을 가질 것이다. => 이로 인해 Promise객체는 성공상태가 됨

 

그 후 promise 객체가 성공상태이므로,. then문에 있는 result 에는 resolve.value = "작업성공!" 이 들어있을 것이고, 최종적으로 콘솔에는 "작업성공!" 이 찍힐 것이다

 

 

📌 내가 이해하기 힘들었던 부분은..

resolve, reject함수를 생성하지도 않았고 내가 매개변수로 넘겨준 함수가 없는데, 어떻게 콜백이 되는 거지 하고 생각이 많았다.

resolve, reject는 위 그림처럼 이미 정의가 되어있는 함수이자 로직인걸 생각해 보니까 이해가 되었다..