JavaScript Promise

Promise

• promise: 비동기를 간편하게 처리 할 수 있게 해주는 object

• 정해진 장시간의 기능을 수행하고 성공해진 메세지와 함께 기능 수행 아니면 에러가 뜸

Producer

// Promise is a JavaScript object for asynchronous peration
// state (상태):pending -> fulfilled or rejected 
// producer vs cosumer 만드는사람/ 소비하는사람

const promise = new Promise((resolve, reject) => {
// when new Promise is created, the ececutor runs automatically.
//doing some heavy work (network, read files)
// 읽어오는것, 네트워크 이런것들은 무겁기때문에 비동기로 처리하는것이 좋다
// promise가 만들어진 순간 바로 수행을 하게됨
// 사용자가 버튼을 눌렀을때 네트워크가 작동되게 하는것은 바로 수행되기때문에 맞지않음 
    console.log('doing something...');
    setTimeout(() => {
       resolve('ellie')
     //reject(new Error('no network'));
    }, 2000);
});

consumers : then, catch, finally

// 약속된 값을 잘 받아온다면 전달되서 결과물을 출력시킴 
// value의 값은 위에 처리과정이 잘 진행되 ellie라고 처리된 값이 들어오게 됨
//than은 promise로 리턴되고 다시 catch 를 붙이게 된다.
    promise.then((value) => {
    console.log(value);
    })
    .catch(error => {
        console.log(error);
    })
   .finally(() => {
       console.log('finally'); //성공하던 실패하던 상관없이 어떤기능을 마지막으로 수행하고 싶을때 finally를 사용함
   });

promise chaining

const fetchNumber = new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000); // Promise 는 1초 있다가 숫자 1을 전달
});
fetchNumber
    .then(num => num * 2) // 2
    .then(num => num * 3) //6
    .then(num => {
        return new Promise((resolve, reject) => { // 새로운 Promise를 리턴
        setTimeout(() => resolve(num - 1), 1000); //5
        });
    })
    .then(num => console.log(num)); //5

Error Handling

// 암닭을 받아오는 
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);
    }); 

// 계란을 받아오는것에 문제가 생겨도 다른것으로 대체하는것 
// 해당부분에서 문제가 생긴후에도 catch를 이용해 error를 처리하고 기능을 진행 할 수 있다. 
getHen() 
    .then(getEgg)
    .catch(error => { // 에러 핸들링 계란을 받을때 문제가 생긴다면 -> 다른것을 리턴해줌
        return '🥗';
    })
    .then(cook)
    .then(console.log)
    .catch(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')); // 에러 'not found'
                }
             }, 2000);
        });

    // 사용자가 엘리이면 이름은 엘리고 role 은 어드민인 값을 전달해주고 아니면 not access라고 전달 
 
    getRoles(user) {
      return new Promise((resolve, reject) => {
          if (user === 'ellie') {
               resolve({ name: 'ellie', role: 'admin' });
            } else {
               reject(new Error('no access')); // 에러 'not 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 ${userWithRole.name}, you have a ${userWithRole.role} role`));
.catch(console.log);