자바스크립트에서 비동기 처리를 위해서 콜백함수를 사용하는데 콜백함수는 콜백지옥을 만들어 가독성이 나쁘고, 비동기 처리 중 발생한 에러 처리가 어렵습니다. 그래서 등장한게 Promise 입니다.
Promise는 콜백지옥 같은 코드가 형성되지 않게 하는 방안으로 ES6에 도입된 기능입니다.
프로미스 처리 흐름 - 출처 : MDN
Promise의 상태는 3가지가 있습니다.
아래와 같이 new Promise()
메서드를 호출하면 대기(pending) 상태가 됩니다.
new Promise();
new Promise()
메서드를 호출할 때 콜백함수를 선언할 수 있고, 함수의 인자는 resolve
, reject
입니다.
new Promise(function(resolve, reject){
// ...
})
resolve
인자를 실행하면 fulfilled 상태가 됩니다.
new Promise(function(resolve, reject){
resolve();
})
Promise에서 resolve된 값은 .then()
으로 받아올 수 있습니다.
function increase(number) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const result = number + 10;
resolve(result);
},1000)
});
}
increase(0).then(number => console.log(number)) // 10
reject
인자를 실행하면 rejected 상태가 됩니다. 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 .catch()
로 받을 수 있습니다.
function increase(number) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const result = number + 10;
if(result > 10){ // 10보다 크면 에러 발생
reject(new Error('숫자가 너무 커요 !'));
}
resolve(result);
},1000)
});
}
increase(0).then(first => {
console.log(first); // 10
return increase(first)
}).then(second => {
console.log(second);
return increase(second);
}).catch(e => {
// 도중에 에러가 발생하면, .catch를 통해 알수 있음
console.log(e); // error
});