JavaScript 프로미스

모던 자바스크립트(저자 이웅모) 내용을 참고하였습니다.

 

💡️ Promise

• 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용할 수 있지만, 여러 단점들이 있다
  • 콜백지옥으로 인해 가독성이 나쁘다 (콜백지옥 : 콜백 함수 호출이 중첩되어 복잡도가 높아지는 현상)
  • 비동기 처리 중 발생한 에러의 처리가 곤란하다
  • 여러 개의 비동기 처리를 한번에 처리하는 데 한계가 있다
• ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입했다
• Promise는 비동기 처리 상태와 처리 결과를 갖는다

 

⚡️ Promise 생성

• Promise 생성자 함수를 new 연산자와 함께 호출하면 Promise 객체를 생성한다
• 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데, 이 콜백 함수는 resolve와 reject함수를 인수로 전달받는다
• 콜백 함수 내부에서 비동기 처리가 성공하면 resolue 함수를 호출하고, 실패하면 reject함수를 호출한다

// 프로미스 생성
const promise = new Promise((resolve, reject) => {
    // Promise 함수의 콜백 함수 내부에서 비동기 처리를 수행한다
    if(/* 비동기 처리 성공 */){
        resolve('result');
    }else{
        reject('failure reson');
    }
});

 

Promise의 상태 정보

pending

• 비동기 처리가 아직 수행되지 않은 상태

fulfilled

• 비동기 처리가 수행된 상태(성공)
• resolve 함수 호출

rejected

• 비동기 처리가 수행된 상태(실패)
• reject 함수 호출

 

⚡️Promise 후속 처리 메서드(then, catch, finally)

• Promise의 비동기 처리 상태가 변화하면 후속 처리 메서드에 인수로 전달한 콜백 함수가 선택적으로 호출된다
• 이때 후속 처리 메서드의 콜백 함수에 Promise의 처리 결과가 인수로 전달된다
• 모든 후속 처리 메서드는 Promise를 반환하며, 비동기로 동작한다

 

then()

• 두 개의 콜백 함수를 인수로 전달받는다
  • 첫번째 콜백 함수: 프로미스가 fulfilled 상태가 되면 호출
  • 두번째 콜백 함수: 프로미스가 reject 상태가 되면 호출

// fulfilled
new Promise(resolve => resolve('fulfilled'))
    .then(v => console.log(v), e => console.log(e)); // fulfilled

// rejected
new Promise(reject => reject(new Error('rejected')))
    .then(v => console.log(v), e => console.log(e)); // Error: rejected

 

catch()

• 한 개의 콜백 함수를 인수로 전달받는다
• Promise가 rejected 상태인 경우에만 호출된다

// rejected
new Promise((_, reject) => reject(new Error('rejected')))
    .catch(e => console.log(e)); // Error: rejected

 

finally()

• 한 개의 콜백 함수를 인수로 전달받는다
• 프로미스의 성공 또는 실패와 상관없이 무조건 한 번 호출된다
• 프로미스의 상태와 상관없이 공통적으로 수행해야 할 처리 내용이 있을 때 유용하다

new Promise(() => {})
    .finally(() => console.log('finally')); // finally