프로미스 개념부터 활용까지 JavaScript Promise

ex)

'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. promise를 만드는 순간 실행됨
const promise = new Promise((resolve, reject)=>{
    //doing some heavy work(network, read files)
    console.log('doing something...');
    setTimeout(()=>{
        resolve('han');
        //reject(new Error('no network'));
    },2000);
});

//2. Consumers: then, catch, finally
promise 
    .then(value =>{ //promise가 정상적으로 될 경우 resolve의 파라미터가 value로 들어옴
    console.log(value);
    })
    .catch(error => {//promise가 오류가 날경우 reject의 파라미터가 error 들어옴
        console.log(error);
    })
    .finally(()=>{
        console.log('finally');
    });

 

예제 실행 화면

 

ex)

//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('닭'),1000);
    });
const getEgg = hen =>
    new Promise((resolve, reject)=>{
        //setTimeout(()=>resolve(`${hen} => 달걀`),1000);
        setTimeout(()=>reject(new Error(`error! ${hen} => 달걀`)),1000);
    });
const cook = egg =>
    new Promise((resolve,reject)=>{
        setTimeout(()=>resolve(`${egg} => 요리`),1000);
    });

getHen() //
    .then(hen => getEgg(hen)) // .then(getEgg)
    .catch(error => {
        return '빵';
    })
    .then(egg => cook(egg))
    .then(meal => console.log(meal)) // .then(console.log);
    .catch(console.log);

 

예제 실행 화면

 

ex)

class UserStorage{
    loginUser(id, password){
        return new Promise((resolve, reject)=>{
            setTimeout(()=>{
                if(
                    (id==='han'&&password==='dream')||
                    (id==='jin'&&password==='academy')
                ){
                    resolve(id);
                }else{
                    reject(new Error('not found'));
                }
            },2000);
        });
    }

    getRoles(user){
        return new Promise((resolve, reject)=>{
            setTimeout(()=>{
                if(user==='han'){
                    resolve({name: 'han',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);