async & await

1. async와 await 기초

async와 await는 JavaScript에서 비동기 작업을 처리할 때 Promise를 더 간단하고 명확하게 작성할 수 있게 도와주는 구문입니다.

1-1. async 함수

async 키워드는 함수 앞에 붙여 사용하며, 이 함수는 항상 Promise를 반환합니다. 반환값이 Promise가 아니라면, 자동으로 Promise.resolve()로 감싸져 반환됩니다.

// fetchUser라는 메서드를 promise객체로 리턴해줌
 function fetchUser() {
   return new Promise((resolve, reject) => {
     //do network request in 10 sec...
     resolve.apply("tim");
   });
 }

// async를 사용한 함수 정의
async function fetchUser() {
// 네트워크 요청이 있다고 가정
return "tim";
}

const user = fetchUser();
user.then(console.log);
// Promise의 결과값 "tim"를 출력console.log(user);// Promise 객체 출력

1-2. await 키워드

await는 async 함수 내부에서만 사용할 수 있으며, Promise가 처리될 때까지 함수 실행을 일시적으로 멈추고, 완료되면 결과값을 반환합니다. 코드가 동기적인 흐름처럼 보이게 만들어줍니다.

---

2. await와 비동기 함수 조합

2-1. delay 함수

delay 함수는 주어진 시간(ms)만큼 대기하는 Promise를 반환합니다.

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

2-2. getApple과 getBanana

• 각 함수는 delay를 호출해 3초 대기한 후, 결과를 반환합니다.
• await를 사용해 비동기 작업을 기다립니다.

async function getApple() {
  await delay(3000);
  return "apple";
}

async function getBanana() {
  await delay(3000);
  return "banana";
}

2-3. pickFruits 함수

getApple과 getBanana를 호출해 결과를 조합합니다.

1. 순차적으로 실행:

두 비동기 작업을 await로 기다리므로 6초가 걸립니다.

async function pickFruits() {
  const apple = await getApple();
  const banana = await getBanana();
  return `${apple} + ${banana}`;
}

2. 병렬 실행:

비동기 작업을 병렬로 실행하려면 Promise 객체를 먼저 생성한 후 await로 결과를 얻습니다. 실행 시간은 3초로 단축됩니다.

async function pickFruits() {
  const applePromise = getApple();
  const bananaPromise = getBanana();
  const apple = await applePromise;
  const banana = await bananaPromise;
  return `${apple} + ${banana}`;
}

3. Promise를 사용한 동일 로직:

Promise를 활용해 동일한 작업을 할 수도 있습니다.

function pickFruits() {
  return getApple().then((apple) =>
    getBanana().then((banana) => `${apple} + ${banana}`)
  );
}

---

3. 유용한 Promise API

JavaScript는 Promise를 효과적으로 관리하기 위해 여러 유틸리티 메서드를 제공합니다.

3-1. Promise.all

Promise.all은 주어진 모든 Promise가 완료될 때까지 기다린 후, 결과값을 배열로 반환합니다. 병렬로 실행되므로 실행 시간이 단축됩니다.

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

pickAllFruits().then(console.log);// "apple + banana"

3-2. Promise.race

Promise.race는 가장 먼저 완료된 Promise의 결과를 반환합니다.

function pickOnlyOne() {
  return Promise.race([getApple(), getBanana()]);
}

pickOnlyOne().then(console.log);// 3초 후 "apple" 또는 "banana"

---

정리

1. async 함수는 항상 Promise를 반환하며, 반환값을 Promise.resolve()로 감싸줍니다.
2. await는 Promise의 완료를 기다리고, 동기 코드처럼 보이게 만듭니다.
3. 병렬 실행을 위해 Promise를 먼저 생성하고 await를 활용합니다.
4. Promise.all과 Promise.race는 여러 비동기 작업을 효율적으로 처리하는 데 유용합니다.

이 코드를 통해 비동기 작업을 동기적인 방식으로 작성하거나, 병렬 처리로 효율성을 높일 수 있습니다.