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);

Promise

참고 : MDN Promise
참고 : 감성프로그래밍

비동기 처리를 위해서 JS 에서는 주로 콜백을 많이 사용함.
콜백은 비동기 처리를 할 수 있지만, 비동기 작업을 순차적으로 처리해야할 경우 중첩시켜 표현하므로 예외처리가 어렵고, 중첩으로 인한 복잡도가 높음.
이를 위해 Promise 라이브러리가 생겼고 ES6에서 언어적 차원에서 지원하게 됨.
IE에서는 지원 되지 않지만 bluebirdjs 라이브러리를 추가 해준다면 지원 가능함.
Promise의 핵심은 목적만 머리에 넣고, 직접 적용해 보는것임.

Promise는 pending(수행중), fulfilled(완료), rejectd(실패), settled(종료)의 단계를 가지고 있고,
단어 의미 그대로 "약속"임. '지금은 없는데, 이상없으면 이따 주고 없으면 알려줄게~' 의 약속임.

Promise의 선언

//  Promise의 선언부
let myPromise = function (param) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (param) {
        resolve("SUCESS!!");
      } else {
        reject(Error("FAIL!!"));
      }
    }, 1000);
  });
};

//  Promise의 실행부
myPromise(false)
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

//  아래처럼 실행할 수도 있음.
myPromise(false).then(
  (result) => console.log(result),
  (err) => console.log(err)
);

Promise의 심화는 생략 하도록 하겠음.