작성자 : 배광식

검수자 : 장기효, 배광식

Promise

콜백 패턴의 단점을 보완하며 비동기 처리 시점을 명확하게 표현한다.

콜백 패턴의 단점

• 비동기 처리 중 발생한 에러의 예외처리가 힘듦

• 여러 개의 비동기 로직을 한꺼번에 처리하는데 한계가 있음

process

state

• pending : 동작이 수행되지 않은 상태

• fulfilled : 동작이 수행된 상태 성공

• rejected : 동작이 수행된 상태 실패

• settled : 동작이 수행된 상태 성공 or 실패

prototype

constructor & then

• 생성자는 resolve, reject 두 매개변수를 가진 콜백 단일 인수를 가진다.

• then은 성공에 대한 콜백과 실패에 대한 콜백 두 인수를 가진다.

const p = new Promise((resolve, reject) => {
    const num = Math.floor(Math.random() * 10);
    if(num === 0 ) {
        throw 'zero';
    } else if(num % 2 == 0) {
        resolve('even number');
    } else {
        reject('odd number');
    }
});

p.then(
    (value) => { console.log('[fulfilled]', value); },
    (reason) => { console.log('[rejected]', reason); }
);

p.catch((e) => { console.log('[catch]   ', e); });

catch

• then(undefined, func)과 동일하게 동작한다.

• 비동기 콜백 내에 발생하는 오류는 잡지 못한다.

const p1 = new Promise((resolve, reject) => {
    throw 'Promise1';
});

p1.catch(e => console.log('[catch]', e));

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
      throw 'Promise2 setTimeout';
    }, 1000);
});

p2.catch(e => console.log('[catch]', e));

method

all

모든 promise의 상태가 fulfilled 또는 첫 rejected가 발생 했을 때 실행된다.

const p1 = Promise.resolve(1);
const p2 = 2;
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('setTimeout Resolve');
    }, 1000)
});

Promise.all([p1, p2, p3]).then(function (values) {
    console.log(values); // [1, 2, 'setTimeout Resolve']
});

race

처음으로 종료(성공 또는 실패)되는 promise를 반환한다.

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('setTimeout 3 second');
    }, 3000);
});
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('setTimeout 2 second');
    }, 2000);
});
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('setTimeout 1 second');
    }, 1000);
});

Promise.race([p1, p2, p3]).then(
    (value) => {
        console.log('[resolve]', value);
    },
    (reason) => {
        console.log('[reject]', reason);
    }
);