Javascript에서 비동기 처리를 다루는 방법에는 여러가지가 있다. 주로 Callback, Promise, Async/Await, Generator/Yield를 활용한다.

• Callback
• Promise
• Async/Await
• Generator/Yield

Async

async 키워드는 함수를 선언할 때 붙여준다.(function 앞에 위치)
new Promise 객체를 사용하지 않아도 무조건 Promise를 반환한다.
반환값이 Promise가 아니더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환한다.

async function f1() {
  return 1;
}

async function f2() {
  return Promise.resolve(1);
}
f1().then(alert); // 1 
f2().then(alert); // 1

Await

await는 말 그대로 Promise가 처리될 때까지 다음 코드는 동작하지 않고 함수 실행을 기다리게 만든다. 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않는다.

async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 

  alert(result); // "완료!"
}

f();

주의 할점은

• await는 async함수 안에서만 동작하고 일반함수에선 동작하지 않는다.
• await 은 최상위레벨 코드에서 작동하지 않는다.

// 최상위 레벨 코드에선 문법 에러가 발생함
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();

// 정상
(async () => {
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();
  ...
})();

Promise와 Async/Await의 차이점

• 에러 핸들링
  Promise 를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야 한다

• 코드 가독성
  Promise의 .then() 지옥의 가능성
  코드가 길어지면 길어질수록, async/await 를 활용한 코드가 가독성이 좋다.
  async/await 은 비동기 코드가 동기 코드처럼 읽히게 해준다. 코드 흐름을 이해 하기 쉽다.

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://ko.javascript.info/async-await