Promise

Promise

콜백 지옥을 우리는 기억할 것이다.. 그 콜백 지옥을 해결하는 방법 중 하나로 손꼽힌다.

또한 예외처리를 쉽게 할 수 있는 방법 중 하나이다.
비동기를 처리하는 패턴 중 하나라고 보면 된다.

상태

pending(대기): 비동기 처리가 수행중이거나 초기 상태
fulfilled(이행): 비동기 처리 완료
rejected(거부): 비동기 처리 실패

아래 간단한 예제를 봐보자. 다음 3가지 상태는 아래와 같다고 생각하면 된다.

const msgPromise = new Promise((resolve, reject) => { // pending
    const msgFunc = (msg) => {
        if (msg === 'success') {
            // fulfilled
            resolve('Success!');
        } else {
            // rejected
            reject('error');
        }
    }
    setTimeout(msgFunc('success'), 500);
});

msgPromise.then(msg => console.log('then: ' + msg)); // then: Success!

.then()

.then 의 첫 번째 인자는 이행했을 때, 두 번째 인자는 거부했을 때의 콜백 함수가 넘어옵니다.

아래는 .then의 예시입니다. 아래 함수의 주석을 변경하여서 then을 실행해보자.
new Promise 를 리턴하여 사용하는 방식을 사용하면, Promise 내부에 비동기함수가 있을시

데이터를 resolve 할 수 있다.
그럼으로 아래와 같은 형식을 return new Promise 를 사용하는 것을 추천한다.

const pro = () => { 
  return new Promise((resolve, reject) => {
    resolve('Success!');
    // reject('Error!');
  });
}

const suc = success => console.log(success);
const err = error => console.log(error);

// success 인 경우, Success!, promise 객체
// error 인 경우, promise 객체, Error!
pro().then(suc, err); 

.catch()

.catch 는 promise 에서 거부했을 때 하나의 콜백 함수가 넘어옵니다.
에러의 경우 대부분, catch 를 사용하여 잡아 줍니다.

const pro = () => {
  return new Promise((resolve, reject) => {
    reject('error!');
  });
}

pro().catch(error => console.log(error)); // error!

.finally()

.finally 는 이행, 거부에 상관없이 지정된 함수를 실행합니다.

const pro = () => {
  return new Promise((resolve, reject) => {
    resolve('success');
  });
}

pro()
.then(success => console.log('success'))
.finally(() => console.log('finally'));

경험

여러 비동기 함수를 실행 시에 많은 콜백으로 인해 가독성이 떨어져 개발하다가 결국 수정을 한 경험이 있는데, 이를 promise를 사용하여, 비동기 함수를 순차적으로 실행하여 현상이 해결한 경험이 있다.

Promise 를 사용하면, 콜백 지옥을 해결할 수 있다고 한다... 는 프로미스 지옥이 기다린다..
이를 해결하기 위해 async 가 나왔다는데..