[Modern JS] 동기 처리를 위한 Async Await

Async / Await

async와 await

01.js

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

async function progress() {
  console.log("HI HI");
  await delay(1000);
  console.log("BYE");
}

progress();

동기 작업이 필요 할 때 함수의 선언 앞부분에 async 키워드를 붙임.
그리고 Promise를 리턴 받는 곳에 await 키워드를 넣어주면 해당 Promise가 끝날 때까지 기다렸다 다음 작업을 수행 할 수 있음.

then

위 코드에서는 delay이라는 함수를 만들어서 파라미터로 넣어준 시간 만큼 기다리는 Promise를 만들고, 이를 progress 함수에서 사용함.
함수에서 async를 사용하면, 해당 함수는 결과 값으로 Promise를 반환하게 됨.
따라서 await을 기다린 후 작업할 것이 있다면, 다음과 같이 then을 써서 코드를 작성할 수 있음.

02.js

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

async function progress() {
  console.log("HI HI");
  await delay(1000);
  console.log("BYE");
}

progress().then(() => {
  console.log("progress end");
});

async await의 catch

async 함수에서 에러를 발생 시킬 때는 throw를 사용하고,
에러처리는 try / catch 문을 이용하면 됨.
03.js

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

async function troubleMaker() {
  await delay(1000);
  throw new Error("await make error");
}

async function progress() {
  try {
    await troubleMaker();
  } catch (err) {
    console.error(err.message);
  }
}

progress();

async await의 return

동기 후 결과를 처리해야 한다면 then으로 결과를 받아서 처리할 수 있음.
04.js

const arr = ["a", "b", "c", "d", "e"];

const delay = (idx) => {
  return new Promise((resolve) =>
    setTimeout(() => {
      resolve(arr[idx]);
    }, 500)
  );
};

const basic = async () => {
  const item = await delay(2);
  console.log("await end");
  return item;
};

basic().then((result) => console.log(result));

async await 의 반복문.

반복문에서 await를 사용해야 하는 경우 forEach문은 사용할 수 없음.
일반적인 for문이나, for in, for of문을 사용해야 함.

05.js

const delay = (item) => {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log(item);
      resolve();
    }, 500)
  );
};

const arr = [0, 1, 2, 3, 4];

const loop = async (array) => {
  array.forEach(async (item) => await delay(item));

  console.log("DONE!");
};

loop(arr);

06.js

const delay = (item) => {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log(item);
      resolve();
    }, 500)
  );
};

const arr = [0, 1, 2, 3, 4];

const loop = async (array) => {
  //array.forEach(async item => await delay(item));
  for (let i = 0; i < array.length; i++) {
    await delay(arr[i]);
  }
  for (const item of array) {
    await delay(item);
  }
  for (const item in array) {
    await delay(item);
  }

  console.log("DONE!");
};

loop(arr);

await의 병렬 처리

동기적이면서 병렬 처리를 하는 방법도 있음.
07.js

const delay = (item) => {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log(item);
      resolve();
    }, 500)
  );
};

const arr = [0, 1, 2, 3, 4];

const parallel = async (array) => {
  const promises = array.map((item) => delay(item));
  await Promise.all(promises);

  console.log("DONE!");
};

parallel(arr);