JS - Promise

Promise 란?

Promise는 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있게 도와주는 객체이다. Promise 이전에 비동기 처리로 콜백 패턴을 사용했으나 콜백 지옥(Callback Hell) 으로 인해 가독성도 나쁘고, 비동기 처리 중에 발생한 에러의 처리가 까다로웠다. Promise는 이러한 단점을 보완하기 위해 나온 대안이라고 봐도 무방하다.

 

 

Promise 객체 생성

const condition = true; // true이면 resolve, false이면 reject
const promise = new Promise((resolve, reject) => {
	if(condition) {
    	resolve('성공'); // then 실행
    else {
    	reject('실패');  // catch 실행 
    }
});
// ...
promise
	.then((message) => {
     console.log(message); // 성공(resolve)한 경우 실행
    })
    .catch((error) => {
     console.error(error); // 실패(reject)한 경우 실행
    })
    .finally(() => {
     console.log('무조건'); // 끝나고 무조건 실행
 });

 

Promise로 구현된 비동기 함수는 Promise 객체를 반환하며, 이로 구현된 비동기 함수를 오출하는 측에서 Promise 객체의 후속 처리 메서디(then, catch)를 통해 비동기 처리 결과 또는 에러 메세지를 전달받아 처리한다. 이를 통해 후속 처리 메서드를 체이닝 방식으로 호출이 가능하다.

 

• then : 두 개의 콜백 함수를 인자로 받으며, 첫 번째 함수는 성공시, 두 번째 함수는 실패시 호출 된다. then은 Promise를 반환다.
• catch : 에러가 발생하면 호출되며, then의 두 번째 인자와 같은 역할을 한다. catch는 Promise를 반환한다.

*첫 번째 콜백 함수 내부에서 오류가 날 경우, 오류를 제대로 잡지 못하는 경우도 있으므로, 가급적 에러 처리는 catch() 통해 하는데 좋다.

 

 

Promise의 상태

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

 

promise 처리 흐름도

 

 

 

[참고]

https://spicycookie.me/JavaScript/promise/

Home