12강. Promise

'use strict';

 

 Promise  is a JavaScript object for asynchronous operation : 비동기 간편처리obj

1) State: pending -> fulfilled or rejected

2) 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('ellie');
        reject(new Error('no network'));	//error
    },2000);

});

 

2.  Consumer  _ then, catch, finally

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

    .catch((value)=>{
        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('🐓'),1000);
    });

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

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



getHen()
	.then(hen => getEgg(hen))
	.then(egg => cook(egg))
	.then(meal => console.log(meal)); //3초 소요, 🐓=>🥚=>🍳
    
//간략히
getHen() //
	.then(getEgg)
	.then(cook)
	.then(console.log);

//reject

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

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

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

//uncaught

getHen() //
	.then(getEgg)
	.catch(error =>{
	    return '🥖'; //즉시문제해결
	})
	.then(cook)
	.then(console.log)
	.catch(console.log);    // 🥖=>🍳

 

Callback Hell example

// 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)}
// );

↓

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);