promise

promise란?

callback과 마찬가지로 비동기 처리를 순차적으로 처리하기 위한 방법

promise의 3가지 상태

• Pending : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled : 비동기 처리가 완료되어 값이 반환된 상태
• Rejected : 비동기 처리가 실패한 상태

promise의 기본 구조

const promise = new Promise(function(resolve, reject) {
  resolve();
  reject(); // error가 발생 안하면 무시됨
});

• resolve(value)
  • 비동기 처리가 완료된 경우 그 결과를 나타내는 value와 함께 호출
  • resolve가 호출되면 Pending에서 Fulfilled로 상태가 변경
• reject(error)
  • 에러 발생 시 에러 객체를 나타내는 error와 함께 호출
  • reject 호출되면 Pending에서 Rejected 상태가 변경

then, catch, finally

then

• Promise의 처리 결과를 다루기 위한 메서드
• 기본적인 사용 방법으로는 then안에 함수를 두개 선언
  • 첫번째는 Fulfilled시의 처리
  • 두번째는 Rejected시의 처리로 정의

function process(str, ms){
    return new Promise(function(resolve, reject) {
        setTimeout(() => {
            resolve(str);
        }, ms);
    });
};

process('프로세스1', 1000).then(
    data => console.log(data),
    err => console.log(err)
);

catch

• 에러가 발생했을 경우에만 다루고 싶다면 catch를 사용

function process(str, ms){
    return new Promise(function(resolve, reject) {
        setTimeout(() => {
            reject(str);
        }, ms);
    });
};

process('실패', 1000).then(
    data => console.log("완료!")
).catch(
    err => console.log(err)
);

finally

• Promise의 최종적으로 실행되는 코드
• 인수가 없음

function process(str, ms){
    return new Promise(function(resolve, reject) {
        setTimeout(() => {
            reject(str);
        }, ms);
    });
};

process('프로세스1', 1000).then(
    data => console.log(data),
    err => console.log(err)
).finally(
    () => console.log("end");
);

promise chaining

여러 비동기 처리를 순차적으로 처리하기 위해서 promise chaining이라는 것을 이용한다.
callback에서 사용했던 예시를 사용해서 구현하면 아래와 같다.
이어서 실행해야할 프로세스를 then을 사용해서 엮으므로서 순차적 처리가 가능하며,
callback에서 나오는 callback 지옥도 예방할 수 있다.

function process(str, ms){
    return new Promise(function(resolve, reject) {
        setTimeout(() => {
            console.log(str)
            resolve();
        }, ms);
    });
};

console.log('start');
process('프로세스1', 1000).then(
    () => process('프로세스2', 500)
).then(
    () => process('프로세스3', 100)
).finally(
    () => console.log("end")
);