JS Promise 입문!

출처. https://www.youtube.com/watch?v=JB_yU6Oe2eE&t=1053s 

JS꽃 동기와 비동기라니 C언어의 꽃 포인터가 생각나는 건 나뿐인가...?

어쨌든 어렵고 그만큼 강력하기에 꽃이라고 했겠지?

 

'use strict';

// Promise is a JavaScript object for asynchronous operation.
// State: pending -> fulfilled or rejected
// Producer vs Consumer

// 1. Producer
// when new Promise is created, the executor runs automatically.
const promise = new Promise((resolve, reject) => {
    // doing some heavy work (network, read files)
    console.log('doing something...');
    setTimeout(() => {
        // resolve('CJM');
        reject(new Error('no network'));
    }, 2000);
});

// 2. Consumers: then, catch, finally
promise
    .then((value) => {
        console.log(value);
    })
    .catch(error => {   // promise 실행 -> then 실행 -> catch 실행
        console.log(error);
    })
    .finally(() => {    // 마지막에 무조건 실행
        console.log('finally');
    });

// 3. Promise chaining
const fetchNumber = new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
});

fetchNumber
    .then(num => num * 2)
    .then(num => num * 3)
    .then(num => {
        return new Promise((resolve, reject) => {
            setTimeout(() => resolve(num - 1), 1000);
        });
    })
    .then(num => console.log(num));

// 4. Error Handling
const getHen = () =>
    new Promise((resolve, reject) => {
        setTimeout(() => resolve('hen'), 1000);
    });
const getEgg = hen =>
    new Promise((resolve, reject) => {
        // setTimeout(() => resolve(`${hen} => egg`), 1000);
        setTimeout(() => reject(new Error(`error! ${hen} => egg`)), 1000);
    });
const cook = egg =>
    new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${egg} => fried egg`), 1000);
    });

getHen()
    .then(hen => getEgg(hen))
    .then(egg => cook(egg))
    .then(meal => console.log(meal));
// "hen => egg => fried egg"
// 위처럼 한 가지의 value를 받아서 바로 전달해주는 경우 암묵적으로 생략가능
getHen()
    .then(getEgg)
    .catch(error => {   // 이런 식으로 Error를 처리해야지 중간에서 처리 & 결과 출력 가능
        return 'bread';
    })
    .then(cook)
    .then(console.log)
    .catch(console.log);

// Error catch
getHen()
    .then(getEgg)
    .then(cook)
    .then(console.log)
    .catch(console.log);

//6. Callback to Promise
class UserStorage {

    loginUser(id, password) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (
                    (id === 'CJM' && password === 'CJM') ||
                    (id === 'coder' && password === 'academy')
                ) {
                    resolve(id);
                } else {
                    reject(new Error('not found'));
                }
            }, 2000);
        });
    }

    getRoles(user) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (id === 'CJM') {
                    resolve({ name: 'CJM', role: 'admin' });
                } else {
                    reject(new Error('no access'));
                }
            }, 1000);
        });
    }
}

const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');

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

이건 잊지 말자!

1. Promise Class 안에 resolve, reject라는 object? 를 이용해서 성공, 에러를 검출한다.

2. Promise가 강력한 이유는. then과. catch로 이뤄진 callback 지옥을 물리칠 방법 때문인 듯하다.

3. return 안에서 Promise class안의 resolve가 전달되는 형태, .then을 통해 성공했을 때 전달받고 생략하는 것까지.