[JS] Promise 동작 방식 : 아주 쉽게 그림으로 정리

※ 이 글은 Promise의 동작 방식에 초점을 두었습니다. Promise에 대한 정확한 설명 혹은 문법은 캡틴 판교 님의 글을 보시면 매우 도움이 되실 겁니다.

Promise란?

Promise(프로미스)는 JavaScript 비동기 처리에 사용되는 객체입니다.

 

Promise의 3가지 상태

Prmoise의 동작 방식을 알기 전, Promise의 3가지 상태에 대해 필수로 알아야 합니다.

Promise는 Promise 객체가 생성하고 종료될 때까지 3가지 상태를 갖습니다.

• Pending(대기): 비동기 처리 로직이 완료되지 않은 상태
• Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태

 

Promise의 동작 방식

🟢 완료(fulfill) 상태에서의 동작 방식

1. Promise 객체 생성

 

비동기 처리가 시작되면 Promise 객체가 생성됩니다.

이때 Promise의 상태는 대기(pending) 상태입니다.

참고: Promise의 상태가 대기 상태(pending)가 아니면, Promise가 확정된 것으로 간주됩니다.

 

2. fulfill(이행)

 

대기 상태의 Promise 객체는 .then() 메서드를 사용해서 비동기 처리 작업을 수행합니다.

연산이 성공적으로 완료되면 완료(fulfill) 상태가 됩니다.

이때 Promise가 확정된 것으로 간주합니다.

 

3. Promise 처리 결과 반환

응답 받은 데이터 즉, 처리 결과를 Promise 객체로 반환합니다.

 

❌  거절(reject) 상태에서의 동작 방식

1. Promise 객체 생성

 

비동기 처리가 시작되면 Promise 객체가 생성됩니다.

이때 Promise의 상태는 대기(pending) 상태입니다.

참고: Promise의 상태가 대기 상태(pending)가 아니면, Promise가 확정된 것으로 간주됩니다.

 

2. reject(거절)

 

대기 상태의 Promise 객체는 .then() 메서드를 사용해서 비동기 처리 작업을 합니다.

하지만 비동기 처리 작업 중 연산이 실패할 경우에는 거절(reject) 상태가 됩니다.

이때 Promise가 확정된 것으로 간주합니다.

그러고 나서 error 처리 작업을 수행합니다.

 

3. Promise 처리 결과 반환

error 처리 작업을 수행한 결과를 Promise 객체로 반환합니다.

 

정리

🟢 완료(fulfill) 상태에서의 동작 방식

 

❌  거절(reject) 상태에서의 동작 방식

Promise의 동작 방식