Async, await

promise를 더욱 간결, 간편하게 '동기적'으로 보이게 만들어준다.
🔥 syntactic sugar!

1. async의 사용

// 동기적 처리를 했을 때,
function fetchUser() {
  // do network reqeust in 10 secs....
  return 'ellie';
}
const user = fetchUser();
console.log(user);

// promise로 비동기적 처리를 했을 때,
function fetchUser() {
  return new Promise((resolve, reject) => {
  // do network reqeust in 10 secs....
  resolve('ellie');
  });
}

const user = fetchUser();
user.then(console.log);
console.log(user);

// async로 비동기적 처리를 했을 때,
async function fetchUser() {
  // do network reqeust in 10 secs....
  return 'ellie';
}

const user = fetchUser();
user.then(console.log);
console.log(user);

2. await의 사용

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

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

// promise 사용,
function getBanana() {
  return delay(1000)
  .then(() => '🍌');
}

// async await 사용,
async function getBanana() {
  await delay(1000);
  return '🍌';
}


// promise 사용,
// promise를 사용할 때, 콜백 지옥과 같은 현상이 생길 수 있다
function pickFruits() {
  return getApple()
  .then(apple => {
    return getBanana()
    .then(banana => `${apple} + ${banana}`);
  });
}

// async await 사용,
async function pickFruits() {
  // 병렬적 실행 but, 이렇게 작성하지 않는다.
  const applePromise = getApple();
  const bananaPromise = getBanana();
  // try catch로 error 처리를 할 수 있다.(작성x)
  const apple = await applePromise;
  const banana = await bananaPromise;
  return `${apple} + ${banana}`;
} 

pickFruits().then(console.log);

3. 유용한 APIs

function pickAllFruits() {
  return Promise.all([getApple(), getBanana()]).then(fruits =>
    fruits.join(' + ')
  );
}
pickAllFruits().then(console.log);

function pickOnlyOne() {
  // race(): 가장 먼저 값을 return하는 애만 전달을 한다.
  return Promise.race([getApple(), getBanana()]);
}

pickOnlyOne().then(console.log);

'드림코딩'님의 async와 await