ES6 - async & await

async & await

promise를 보다 깔끔하게 사용하는 방법

syntactic sugar
기존에 존재하는 것을 한번 감싸서 좀더 사용하기 편하게 만든 것
async await은 syntactic sugar이다.

async

promise 예제

function fetchUser() {
  return new Promise((resolve, reject) => {
  	//10초이상 필요한 무거운 작업...
    resolve('ellie');
  });
}

const user = fetchUser();
  user.then(console.log);
console.log(user);
// Promise {<fulfiled>: 'ellie'}
// ellie

async로 promise 간편하게 표현

async function fetchUser() {
  	//10초이상 필요한 무거운 작업...
    return 'ellie';
}

const user = fetchUser();
  user.then(console.log);
console.log(user);
// Promise {<fulfiled>: 'ellie'}
// ellie

await

async가 붙은 함수 내에서만 사용이 가능하다.

resolve를 전달받을 때 까지 기다렸다가 진행하게 해준다.

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

async function getApple() {
  await delay(1000);
  return 'apple';
}

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

async function pickFruits() {
  // return getApple().then(apple => {
    // return getBanana().then(banana => `${apple} + ${banana}`);  
  // });  // callback 지옥
  try {
  const apple = await getApple();  // 1초 대기
  const banana = await getBanana();  // 추가 2초 대기
  } catch () {
    
  }
  return `${apple} + ${banana}`;
}
pickFruits().then(console.log);  // 3초 후 apple + banana

await 병렬 처리

await 처리를 병렬적으로 할 수 있다.

독립적으로 사용되는 경우 병렬적으로 구현하는 것이 효율적이다.

 async function pickFruits() {
   const applePromise = getApple();
   const bananaPromise = getBanana();
   const apple = await applePromise;
   const banana = await bananaPromise;
   // 2초만 대기
   return `${apple} + ${banana}`;
 }
pickFruits().then(console.log);  // 2초 후 apple + banana

유용한 Promise API

Promise.all([ ])

배열 안에 있는 모든 함수가 실행되고 나서 배열로 value를 전달해준다.

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

Promise.race([ ])

배열 안에 있는 모든 함수 중 제일 먼저 실행이 완료된 return value만 전달해준다.

function pickOnlyOne() {
  return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log);  // 1초 후 apple