[JS] async & await 개념

• async와 await은 기존의 promise에서 좀 더 간편한 API를 제공하는 Syntactic sugar라고 할 수 있다.
• Syntactic sugar: 기존에 존재하는 것을 보완하여 좀 더 간편하고 편리하게 쓸 수 있는 것을 말한다. 예) Class, Async & Await

// 1. 기존 Promise를 사용한 방법
function fetchUser() {
  return new Promise((resolve, reject) => {
    // do network request in 10 secs...
    resolve('promise!');
  });
}
const user = fetchUser();
user.then(console.log);
console.log(user);
// Promise {<fulfilled>: 'promise!'}
// promise!


// 2. async를 사용한 방법
async function fetchUser2() {
  return 'async!'
};
const user2 = fetchUser2();
user2.then(console.log);
console.log(user2);
// Promise {<fulfilled>: 'async!'}
// async!


// 3. await
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
  await delay(2000);
  return '🍎';
}

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

async function pickFruits() {
  const apple = await getApple();
  const banana = await getBanana();
  return `${apple} + ${banana}`;
}
pickFruits2().then(console.log); // 🍎 + 🍌

// then을 이용한 promise chaining을 과도하게 사용할 경우 가독성이 떨어진다.
function pickFruits2() {
  return getApple().then(apple => {
    return getBanana().then(banana => `${apple} + ${banana}`);
  });
}
pickFruits2().then(console.log); // 🍎 + 🍌


// 4. useful Promise APIs
// Promise.all(): promise 배열을 전달하게되면 모든 promise들이 병렬적으로 다 받아옴.
function pickAllFruits() {
  return Promise.all([getApple(), getBanana()]).then(fruits =>
    fruits.join(' + ')
  );
}
pickAllFruits().then(console.log); // 🍎 + 🍌

// Promise.race(): 처리가 가장 먼저되는 코드를 출력
function pickOnlyOne() {
  return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log); // 🍌 : 바나나가 delay시간이 더 짧기에 바나나만 출력

• 참고 영상: https://www.youtube.com/watch?v=aoQSOZfz3vQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=13