promise

Promise

• Promise is a JavaScript object for asynchronous operation
• State: pending → fullfilled or rejected
• Producer 와 Consumer 의 구분

 

1. Producer

• promise 만들기

// when new Promise is created, the executor runs automatically

const promise = new Promise((resolve, reject) => {    // 정상적으로 작동하면 resolve, 아니면 reject 수행
  // doing some heavy work(network, read files)
  setTimeout(() => {
    resolve('ellie');
    reject(new Error('no network'));
  }, 2000;
});

 

2. Consumers: then, catch, finally

• promise 사용하기

promise
.then(value => {
  console.log(value);
})    // resolve 일 때 2초 뒤에 ellie 출력
.catch(error => {
  console.log(error);
});    // reject 일 때 Error: no network 출력
.finally(() => {
  console.log('finally')        // 성공, 실패와 상관없이 마지막에 실행됨
  });    // 마지막에 finally 출력

 

3. Promise chaining

• promise 연결하기

const fetchNumber = new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
});

fetchNumber
.then(num => num * 2)    // 2
.then(num => num * 3)    // 6
.then(num => {    // 6
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(num - 1), 1000);    // 6 - 1
  });
})
.then(num => console.log(num));    // 2초 뒤에 5 출력

 

4. Error Handling

const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('chicken'), 1000);
  });
const getEgg = hen =>
  new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error(`error! ${hen} => egg`), 1000);
  });
const cook = egg =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => fried egg`), 1000);
  });

getHen()
.then(hen => getEgg(hen))    // .then(getEgg)로 작성 가능
.catch(error => {    // catch로 에러를 잡아줬기 때문에 에러가 나지 않고 빵으로 대체해서 출력됨
  return 'bread';
})    // bread => fried egg
.then(egg => cook(egg))
.then(meal => console.log(meal))    // chicken => egg => fried egg 
.catch(console.log);    // error! chicken => agg

 

5. Callback to 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, onSuccess, onError) {
    setTimeout(() => {
      if(user === 'ellie') {
        onSuccess({ name: 'ellie', role: 'admin' });
      } else {
        onError(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 ${userWithRole.name}, you have a ${userWithRole.role} role`)
.catch(console.log(error));