[Javascript] Promise란?

2022.12.01 - [Javascript] - [Javascript] 동기(Synchronous)와 비동기(asynchronous)란?

[Javascript] 동기(Synchronous)와 비동기(asynchronous)란?

2022.12.04 - [Javascript] - [Javascript] 콜백(Callback) 함수란?

[Javascript] 콜백(Callback) 함수란?

Promise란?

  기존에 Javascript는 비동기 통신을 할 경우 콜백(Callback) 함수를 사용하여 비동기 처리를 하였다. 하지만 콜백(Callback) 함수를 연속으로 처리하다 보면 코드의 가독성이 떨어지며, 콜백지옥의 문제가 생겼다. 이러한 문제 해결의 방법으로서 Promise 객체란 개념이 도입되었다. 콜백(Callback)과 비동기의 개념이 없으시다면 위의 링크된 글을 먼저 읽어주시면 감사하겠습니다. 

 

Promise  객체

 Promise 객체는 성공, 실패에 상관없이 그 결과값을 대표하는 Object이다.  Promise 객체는 다음과 같이 구성됩니다.

const promise = new Promise((resolve, reject)=>{

});
promise.then(
	//비동기 처리 성공 처리
)
.catch(
	//비동기 처리 실패 처리
)

 

 Promise 객체는 new 키워드를 통해 생성됩니다. 이 생성된 객체는 resolve, reject 두 개의 매개변수를 받고, 각각 비동기 통신의 성공/실패에 따른 후 처리를 .then 메서드와 .catch 메서드를 통해 결과에 따른 후처리를 하게 됩니다.

---

Promise  객체의 상태

 Promise의 상태는 호출되는 메서드에 따라 3가지로 분류됩니다.

• Pending(대기 상태)
• Fulfilled(실행 상태)
• Rejected(실패 상태)

 

💥Pending(대기 상태)

// promise 객체가 생성되는 시점은 실행 상태
const promise = new Promise();

 

💥Fulfilled(실행 상태)

const promise = new Promise((resolve)=>{

});
//실행 상태
promise.then(
	//비동기 처리 성공 처리
)

💥Rejected(실패 상태)

const promise = new Promise((reject)=>{

});
//실패 상태
.catch(
	//비동기 처리 실패 처리
)

 

 

---

⭐Promise  응용

 실제 프로그래밍을 하다 보면 Promise 객체를 직접 생성해서 리턴하며 사용하는 방식보다는 외부에서 리턴 받은 Promise 객체를 사용하는 경우가 더 많습니다. 대표적으로 Javascript fetch() 함수가 있습니다. fetch() 함수에 대한 내용은 아래 링크를 통해 확인해주시면 감사하겠습니다.

2023.01.01 - [Javascript] - [Javascript] Fetch API

[Javascript] Fetch API