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

'use strict'

//프로미스는 비동기통신에서 콜백함수 대신 유용하게 사용할 수 있는 오브젝트이다
//기능수행이 완료되고 성공했는지 실패했는지에 대해서 아는게 중요   -- state
//produce와(제공자) consumer의 차이점에 대해서 아는게 중요하다(데이터 제공에 대한)
//state : 오퍼레이션이 수행중일때는 pending상태라고한다.
// ->오퍼레이션이 다 끝나게되면 fulfilled 상태가 된다/ 또는 rejected
//Producer vs Consumer

//1. Producer
//when new Promise is created, the executor runs automatically.
const promise = new Promise((resolve,reject)=>{
    //좀 무거운 일들을 한다 (네트워크에서 무거운것들은 시간이 걸리기때문에 비동기로 처리하는것)
    console.log('doing something')
    setTimeout(()=>{
    resolve('miki');
    },2000);
    // reject(new Error('no network'));
}); 

//2. Consumers : then, catch, finally를 이용해 값을 받아올 수 있다(Producer의)
promise.then((value)=>{
    console.log(value);
})
.catch(error=>{
    console.log(error);
})
.finally(()=>{
    console.log('finally');
});

console.clear();
//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(()=> reject(new Error(`${hen}=>계란`)),1000);
    });

const cook = egg =>
    new Promise((resolve,reject)=>{
        setTimeout(()=>resolve(`${egg} => 계란후라이`),1000);
    });
//콜백함수에서 받아오는 value가 넣는value와 동일하면 생략가능 ((hen)=>getEgg(hen)과 같은모양이다)
getHen() //
    .then(getEgg)
    .catch(error =>{  //오류를 잘 처리하고싶으면 catch를 넣을곳을 잘 설정하자
        return '빵';
    })
    .then(cook)
    .then(console.log)
    .catch(console.log);

--------------------------------------여기까지는 Promise에 대한 정리------------------------------------------------------

 

 

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(console.log);

// ====================아래의 callback hell을 위의 3줄로 바꿀수 있는것이 Primise!!=========
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를 통해서 callback hell을 탈출하는 법을 도전해보았다!