JavaScript - promise

Promise란..?

javascript에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 object이다.
정해진 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행되었다면 성공의 메세지와 함께 결과를 전달,
정상적으로 수행되지 않았다면 에러를 보내준다.

State(기능을 수행중인지, 실행 완료 후 성공했는지 또는 실패했는지)

: pending(수행 중) -> fulfilled(성공) or rejected(실패)

Producer(데이터를 제공) vs Consumer(데이터를 소비)

1. Producer

<script>
<!--새로운 promise가 만들어질 때는 전달한 executor 함수가 자동적으로 실행된다-->
<!--resolve: 기능을 정상적으로 수행해서 마지막에 최종 데이터 전달-->
<!--reject: 기능을 수행하다가 중간에 문제가 생기면 호출-->
<!-- 시간이 걸리는 일은 promise를 통해 비동기적으로 처리하는 것이 좋다-->
  const promise = new Promise((resolve, reject) => {
      //doing some heavy work (network, read files)
      console.log('doing something...'); // doing something...
      //네트워크 통신을 하는 것처럼 setTimeout호출
      setTimeout(() => {
          resolve('mia'); // 성공했을 때
          reject(new Error('no network'));
      }, 2000);
  });
</script>

2. Consumers: then, catch, finally

.then: promise가 정상적으로 처리되어서 마지막으로 resolve 콜백 함수를 통해 전달한 값이 파라미터로 전달된다.
.catch: 에러가 발생했을 때 어떻게 처리할지 콜백함수를 등록.
.fianlly: 처리의 성공과 실패에 상관없이 무조건 마지막에 호출되어진다.

<script>
  promise//
  .then(value => {
  	console.log(value); // resolve일 때는 => mia, reject일 때는 => no network에러
  });
  .catch(error => {
  	console.log(error); // no network가 콘솔에 찍힘(no error)
  });
  .finally(() => {
  	console.log('finally'); // resolve일 때는 => mia / finally, reject일 때는 => 에러 콜백 처리 후 / finally
  });
</script>

3. Promise chaining

then으로 비동기적인 함수들을 묶을 수 있다.

<script>
  const fetchNumber = new Promise((resolve, reject) => {
  	setTimeout(() => resolve(1),1000);
  });
  fetchNumber
  .then(num => num * 2)
  .then(num => num * 3)
  <!--then은 값을 바로 전달해도 되고 또 다른 promise를 전달해도 된다-->
  .then(num => {
  	return new Promise((resolve, reject) => {
    	setTImeout(() => resolve(num - 1), 1000);
    });
  });
  .then(num => console.log(num)); // 2초뒤 5
</script>

4. Error Handling

<script>
  const getHen = () =>
  	new Promise((resolve, reject) => {
    	setTimeout(() => resolve('🐓'), 1000);
    });
  const getEgg = hen =>
  	new Promise((resolve, reject) => {
    	setTimeout(() => resolve(`${hen} => 🥚`), 1000);
    });
  const cook = egg =>
  	new Promise((resolve, reject) => {
    	setTimeout(() => resolve(`${egg} => 🍳`), 1000);
    });
  <!--chaining-->
  getHen()
    .then(hen => getEgg(hen))
    .then(egg => cook(egg))
    .then(meal => console.log(meal)); // 3초후 🐓 => 🥚 => 🍳
  <!--좀 더 간결하게 쓰는 법-->
  getHen() 
  <!--콜백함수를 전달할 때 받아오는 value를 하나만 받아서 다른 함수로 호출 하는 경우에는 그 값이 생략 가능하다-->
  .then(getEgg)
  .then(cook)
  .then(console.log)
  <!--오류를 잘 처리하는 법-->
  getHen() 
  .then(getEgg)
  // 계란을 받는데 실패했을 때 대체해보기
  .catch(error => {
  	return '🥖';
  })
  .then(cook)
  .then(console.log)
  // 🥖 => 🍳
</script>

4. Callback to Promise

<script>
<!-- class 선언-->
  class UserStorage {
  	loginsUser(id, password) {
  	  return new Promise((resolve, reject) => {
    	setTimeout(() => {
        	if(
            	(id === 'mia' && password === '1234') ||
                (id === 'jiyeon' && password === '5678')
            ) {
            	resolve(id);
            } else {
            	reject(new Error('not found'));
            }
          }, 2000);
      });
    }
    getRoles(user) {
    	return new Promise((resolve, reject) => {
        	setTimeout(() => {
        	if(user === 'mia') {
            	resolve({ name: 'mia', role: 'admin'});
            } else {
            	reject(new Error('no access'));
            }
        }, 1000);
      })
    }
<!--0bject 만들기-->
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);
</script>