[JS] async function

 ✨ async • await

• ES2017
• Promise chaining을 async & await로 간편하게 사용할 수 있다.
• async 와 await는 새로운 것이 추가 된게 아니라, 기존에 존재하는 Promise 위에 조금 더 간편한 API를 제공한다.
  => Syntactic sugar(기존에 존재하고 있는 것을 감싸서 조금 더 간편하게 사용할 수 있는 것)

 

1. async 

• function 앞에 async 키워드 사용
• 결과값을 Promise로 반환

async function fetchUser() {
  // do network request in 10 secs...
  return 'ellie';
}

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

 

2. await 

• await는 async 함수 내부에만 사용 가능
• await문을 만나면 함수의 실행을 일시 중지하고 await 뒤의 프로미스의 수행 결과값을 받아 함수를 재진행
• error 처리: try/catch문

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
async function getApple() {
  await delay(2000);
  //   throw 'error';
  console.log('사과🍎');

  return '🍎';
}
async function getBanana() {
  await delay(1000);
  console.log('바나나🍌');
  return '🍌';
}

function getBananaPromise() {
  return delay(2000).then(() => '🍌');
}

async function pickFruits() {
  // 1. promise 사용했을 때 (콜백지옥)
  //   return getApple().then((apple) => {
  //     return getBanana().then((banana) => `${apple} + ${banana}`);
  //   });

  // 2. 직렬
  // const apple = await getApple();
  // const banana = await getBanana();

  // 3. 병렬
  const applePromise = getApple();
  const bananaPromise = getBanana();
  const apple = await applePromise;
  const banana = await bananaPromise;

  return `${apple} + ${banana}`;
}

pickFruits().then(console.log);

3. useful APIs ✨

3-1. Promise.all

• 병렬적으로 다 반환될 때까지 기다려서 반환

function pickAllFruits() {
  // promise를 병렬적으로 다 받을 때까지 모아줌.
  return Promise.all([getApple(), getBanana()]).then((fruits) =>
    fruits.join(' + ')
  );
}
pickAllFruits().then(console.log);

3-2. Promise.race

• param 배열에 전달된 promise중에서 가장 먼저 값을 전달받은 것을 리턴

function pickOnlyOne() {
  // param 배열에 전달된 promise중에서 가장 먼저 값을 전달받은 것을 리턴
  return Promise.race([getApple(), getBanana()]);
}

pickOnlyOne().then(console.log);

 

 

참고

🌟드림코딩 엘리님의 youtube강의를 보고 공부한 내용을 정리한 포스팅입니다🌟

👉youtube강의 https://www.youtube.com/watch?v=aoQSOZfz3vQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=13