Promise 개념부터 활용까지

❓ Promise
    - js에서 제공하며, 비동기를 간편하게 처리할 수 있도록 도와주는 object
    - 정해진 기능 수행 후 성공 시 성공 메시지와 결과값 전달
    - 기능 수행 시 문제 발생 시 에러 전달
    - 비동기적인 것을 수행하기 위해 Callback함수 대신에 유용하게 사용 가능

❗ Point
    - 1. State: process가 heavy한 operation을 수행 중인지, 기능 수행을 성공/실패 했는지
    - 2. Producer(정보제공자) / Consumer(정보사용자)의 차이점

 

• Promise는 class ➡ new 키워드를 통해 생성할 수 있다.
• 생성자: executor라는 콜백함수 전달
• executor 안에서는 다시 resolve와 reject 콜백함수 전달
• resolve: 기능 정상 수행 후 최종 데이터 전달
• reject: 기능 수행 중 문제 발생 시 호출
• Promise를 만드는 순간, executor는 바로 실행된다. (즉, 사용자가 요구했을 때만 네트워크 요청을 해야하는 경우라면 문제가 발생할 수 있다!)

 

1. Producer

1-1. Resolve

const promise = new Promise((resolve, reject) => {
    // doing some heavy work (network, read files)
    console.log('doing something...');
    setTimeout(() => {
        resolve('ellie');
    }, 2000);
});

1-2. Reject

• 보통 Error라는 object를 통해 값을 전달한다.

const promise = new Promise((resolve, reject) => {
    // doing some heavy work (network, read files)
    console.log('doing something...');
    setTimeout(() => {
        //resolve('ellie');
        reject(new Error('no network'));
    }, 2000);
});

 

2. Consumer

• then, catch, finally를 이용해서 값을 받아올 수 있다.
• promise가 정상적으로 잘 수행된 후 최종적으로 resolve를 통해 전달된 값이 파라미터로 전달된다.

2-1. Resolve의 값을 받아오는 경우

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

2-2. Reject의 값을 받아오는 경우

가) then을 이용해서 성공적인 case만 다루는 경우

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

 

나) Error handling

• then을 이용해서 성공적인 case를 잘 다뤘다면, catch를 통해 error 발생 시 어떻게 처리할 것인지 콜백함수를 등록한다.
• Chaining: then을 호출하면 Promise를 return하기 때문에, 거기서 다시 catch 호출 가능

promise
.then((value) => {
    console.log(value); // 성공한 값
})
.catch(error => { // 실패한 error
    console.log(error);
})

3-3. Resolve, Reject와 상관없이 마지막에 무조건 호출되는 경우

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

가) Resolve인 경우

나) Reject인 경우

 

 

3. Promise chaining

• then은 값을 바로 전달할 수도 있고, 또 다른 비동기인 Promise를 전달해도 된다!

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));
// 총 2초 소요!

 

4. Error Handling

const getHen = () => new Promise((resolve, reject) => {
    setTimeout(() => resolve('🐓'), 1000);
});

const getEgg = hen => new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error(`${hen} => 🥚`)), 1000);
});

const cook = egg => new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => 🍳`), 1000);
});

getHen()
.then(getEgg) // .then(hen => getEgg(hen))
.catch(error => {
    return '🍞'; // getEgg에서 에러 발생했을 때, 대신 빵을 받아온다!
}) // 필요한 곳에 적절한 순서로 배치하는 것 중요
.then(cook) // .then(egg => cook(egg))
.then(console.log); // .then(meal => console.log(meal));

 

5. Callback to Promise

// Callback Hell example
class UserStorage {
    loginUser(id, password) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if(
                    (id === 'ellie' && password === 'dream') ||
                    (id === 'coder' && password === 'academy')
                ) {
                    resolve(id);
                } else {
                    reject(new Error('not found'));
                }
            }, 2000);
        });
    }
    
    getRoles(user) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if(user === 'ellie') {
                    resolve({name: 'ellie', 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);

 

 

 

참고

youtube 드림코딩 by 엘리

https://www.youtube.com/watch?v=JB_yU6Oe2eE&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=12