[엘리의 드림코딩 JS] 12. Promise

https://youtu.be/JB_yU6Oe2eE

'use strict';

// Promise is a javascript object for asynchronous operation.
// 학슾 포인트: 1. state / 2.Producer vs Consumer
// State: pending -> fulfilled or rejected
//  Producer vs Consumer

// 1. Producer
// when new Promise is created, the executor runs automatically.
// Promise는 만드는 즉시 execute 함수 실행된다.
// 따라서 가령 네트워크 요청을 사용자가 요구할 때만 하고자 한다면, 사용자 요구하지도 않았는데 불필요한 통신 일어날 수 있다.
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. Consumers : then, catch, finally 이용해 값 받아올 수 있다.
// .then은 resolve의 인자가 들어오게 된다.
promise
  .then(value => {
    console.log(value);
  })
  .catch(error => {  //체이닝 가능한 이유는 then이 똑같은 promise return하니까.
    console.log(error);
  })
  .finally(()=> {
    console.log('fianlly');  
  });


  // 3. Promise chaining
  const fetchNumber = new Promise((resolve, reject) => {
    setTimeout(() => {
      console.clear();
      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(`error! ${hen} => 🥚`)), 1000);
      });
    const cook = egg =>
      new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${egg} => 🍳`), 1000);
      });

      getHen()
      // .then(hen => getEgg(hen)) callback 함수에서 인자 1개일 경우 이렇게 함수명만 적는 생략 가능
      .then(getEgg)
      .catch(error => {
        return '🍕';
      })
      .then(cook)
      .then(console.log)
      .catch(console.log);

지난 시간에 작성한 Callback Hell을 Promise로 깔끔하게 만들어보자!

class UserStorage {
  loginUser = (id, password) => 
    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) => 
    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') // 브라우저 API
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);