[입문] Promise에 대해 아라보자

Promise is a JavaScript object for asynchronous operation.

- State: pending -> fulfilled or rejected
- operation이 수행중일때 pending 상태
- operation 성공시 fulfilled / 실패시 rejected
- Producer vs Consumer

// 1. Producer
// Promise는 클래스기 때문에 new로 생성
// 성공시 resolve(), 실패시 reject()
// when new Promise is created, the executor runs automatically.
// promise는 생성하는 순간, executor에 의해 자동으로 돌아가게 되어있음
const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  console.log('doing something...');
  setTimeout(() => {
    resolve('jisun');
    // reject(new Error('no network'));
  }, 2000);
});

// 2. Consumers: then, catch, finally
promise //
  .then(value => { // 정상적으로 수행시 resolve를 통해 입력받은 jisun 출력
    console.log(value);
  })
  .catch(error => { // 실패시 reject를 통해 입력받은 에러 출력
    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)); // 5 출력
// promise는 then에서 promise 그 자체를 전달할 수 있음. 
// then 내의 동작들이 다 작동하고 난 뒤에 다음 then으로 넘어감

// 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);
    // setTimeout(() => resolve('🥚'), 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)); 

getHen() // <---옆에 주석을 붙이면 자동적으로 아래와 같이 정렬이 됨
  .then(getEgg) // 바로 value를 받아오는 것들은 생략이 가능
  .then(cook)
  .then(console.log)
  .catch(console.log);


// ===================================================================

// Callback Hell example
class UserStorage {
  loginUser(id, password) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (
          (id === 'jisun' && password === 'test') ||
          (id === 'yeochi' && password === 'test')
        ) {
          resolve(id);
        } else {
          reject(new Error('not found'));
        }
      }, 2000);
    });
  }

  getRoles(user) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (user === 'jisun') {
          resolve({ name: 'jisun', role: 'admin' });
        } else {
          reject(new Error('no access'));
        }
      }, 1000);
    });
  }

  // Homework Answer 🚀
  async getUserWithRole(user, password) {
    const id = await this.loginUser(user, password);
    const role = await this.getRoles(id);
    return role;
  }
}

// Original code from Youtube course
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your passrod');
userStorage
  .loginUser(id, password) // 로그인 성공시
  .then(userStorage.getRoles) // 유저의 롤 가져옴
  .then(user => alert(`Hello ${user.name}, you have a ${user.role} role`))
  .catch(console.log);

// Homework Answer 🚀
userStorage
  .getUserWithRole(id, password) //
  .catch(console.log)
  .then(console.log);