async / await

JS 프로그래밍을 하다 보면 비동기 방식을 많이 사용하게 되는데,
비동기 호출 후 이를 처리하는 콜백 함수의 개념이 매우 중요하다.

비동기 프로그래밍에서 콜백 함수는 반드시 사용해야 하는 부분인데,
콜백 함수가 깊어지면 코드가 복잡해지게 되므로( 가독성이 안좋아지므로 ) ES6에서 Promise를 도입했다.

하지만 Promise를 사용해도 여전히 코드가 복잡하여 ES8에서 async와 await을 도입했고,
덕분에 비동기 코드를 동기적으로 깔끔하게 처리할 수 있게 되었다.

async

• async 함수는 리턴되는 모든 결과 값이 promise.resolve로 암묵적으로 감싸진다.
  즉, 코드에서 어떤 값을 리턴하면 자동으로 그 값이 promise.resolve의 인자로 전달된 것이 리턴 된다.

await

• 함수 정의 앞에 async 키워드를 사용하면 함수 내에 await를 사용할 수 있다.
  (await 키워드는 async 함수에서만 유효하다.)
• await하는 것은 전부 Promise.resolve()를 통해 전달되는데, promise를 await할 때 함수는 프라미스가 결정될 때까지 방해하지 않는 방식으로 일시 중지된다.
  Promise가 이행되면 값을 돌려받는다. Promise가 거부되면 거부된 값이 반환(throw)된다.
• 배열을 iterate하여 await 구문을 사용할 때 주의해야 한다.

예제

URL을 가져와서 응답을 텍스트로 로그하려는 경우

Promise

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

async / await

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

줄 개수는 같지만 콜백이 전부 사라졌다.
따라서 Promise에 익숙하지 않은 사람으로서는 훨씬 더 읽기 쉬워진다.

[JS] async/await으로 콜백지옥을 해결해보자
비동기 함수 - 프라미스에 친숙해질 수 있게 해주는 함수
[JS/Asynchronous] Async / Await 다루기