Javascript - async, await

도움되는 자료
1. callback
2. promise
3. async/await

async / await

• Promise를 더 간결하고, 간편하게 만듬.

• 동기적으로 실행되는 것처럼 보이게 해줌.

  	기존에 존재하는 것을 조금 더 간편하게 쓸 수 있게 API를 제공하는 것을 syntactic sugar라고 함. (ex. class) 

async 사용방법

기존 Promise 문법
	  function fetchUser() {
        return new Promise((resolve, reject) => {
          return resolve('ryan');
        });
      }
      const user = fetchUser();
      user.then(console.log);

aysnc 적용 후
      async function fetchUser() { // promise의 식을 간결하게 표현할 수 있음.
      	return 'ryan';
      }
      const user = fetchUser();
      user.then(console.log);

await

기본문법 
async function 함수명() {
  await 비동기 처리 메서드	();
}
예시 문법
  function delay(ms) {
        return new Promise((resolve) => setTimeout(resolve, ms));
      }

      async function getApple() {
        await delay(1000); // 1초 뒤에 resolve 호출됨.
        return 'apple'; // getApple()의 return값
      }

      async function getBanana() {
        await delay(1000);
        return 'banana';
      }

기존 Promise 식 
// then + callback으로 값을 계속해서 연결
// 가독성 저하
    function pickFruits() {
      return getApple().then((apple) => { 
        return getBanana().then((banana) => `${apple}+${banana}`);
      });
    }

await 적용
// 각 값을 const로 할당시킬 수 있으며, 간결하게 동기식으로 표현 가능.
    async function pickFruits() {
      const apple = await getApple(); 1초
      const banana = await getBanana(); + 1초
      return `${apple}+${banana}`;
    }

Promise.all/race

• 각 promise 함수를 실행했을 때 특정 조건을 지정할 수 있음.
• promise all : 배열 내 프로미스가 모두 실행이 완료된 뒤의 promise 값의 배열을 반환
• promise race : 배열 내 프로미스 중 가장 빨리 완료된 프로미스의 값을 반환

promise all     
	function pickFruits() {
        return Promise.all([getApple(), getBanan()])
          		.then((fruits) => fruits.join(' + '));
      } // output : 'apple + banana'

promise race
      function pickOnlyOne() {
        return Promise.race([getApple()], getBanana());
      }
      pickOnlyOne().then(console.log); // output : 'apple'