[자바스크립트] 9. 동기, 비동기 - Promise

Promise란?

mozilla - Promise
Promise는 javascript의 객체 중 하나로, 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. 비동기 작업시 콜백 대신 사용이 가능하며, pending, fulfilled, rejected 총 3개의 상태(state)를 갖는다.

1. pending

이행하거나 거부되지 않은 초기 상태를 말한다.

new Promise();

2. fulfilled

promise의 인자 중 resolve를 실행하면 fulfilled 상태가 된다.

new Promise((resolve, reject) => {
    resolve();
});

3. rejected

promise의 인자 중 reject를 실행하면 rejected 상태가 된다.

new Promise((resolve, reject) => {
    reject();
});

---

메서드

then

promise가 resolve되면 then 키워드를 통해 처리된 결과 값을 받을 수 있다.

promise
    .then((value) => {
    console.log(value);
    });

catch

promise가 reject되면 catch 키워드를 통해 실패 이유를 받을 수 있다.

promise
    .catch(error => {
        console.log(error);
    });

finally

promise가 resolve되든 reject되든 실행된다.

promise
    .then((value) => {
    console.log(value);
    })
    .catch(error => {
        console.log(error);
    })
    .finally(() => {
        console.log('finally');
    });

all

iterable한 객체에 주어진 모든 Promise가 이행 된 뒤, 그 결과를 반환한다.

race

iterable한 객체에 주어진 Promise 중 가장 먼저 이행된 결과값을 반환한다.

---

promise를 쓰는 이유

promise는 기존의 callback의 문제를 보완한다.
콜백 지옥의 경우 resolve,reject 키워드를 통해 수정이 가능하다.

또한, then, catch는 다시 promise를 리턴하기 때문에 chain 형태로 사용이 가능해 가독성 면에 있어 더 유리하다.

callback 사용한 경우

userStorage.loginUser(
    id,
    password,
    (user) => {
        userStorage.getRoles(
            user,
            userWithRole => {
                alert(`hello ${userWithRole.name}, you have a ${userWithRole.role} role`);
            },
            error => {
                console.log(error);
            }
        );
    },
    error => {
        console.log(error);
    }
);

promise 사용한 경우

userStorage.loginUser(id, password)
.then(userStorage.getRoles)
.then(user => alert(`hello ${user.name}, you have a ${user.role} role`))
.catch(console.log);

then, catch의 사용과 파라미터 생략을 통해 코드가 훨씬 간략해 진것을 확인할 수 있다.