📓 비동기 처리

이전 편에서 자바스크립트에서 비동기 처리하는 Promise와 콜백 패턴 방식에 대해 알아보았습니다. 이번에는 조금 더 세련된 방식으로 비동기 코드를 작성하는 구문에 대해 정리해보도록 하겠습니다.

✔️ async/await 구문

ES2017 (ES8문법)

async await는 비동기 프로그래밍을 동기 프로그래밍 방식으로 작성하는데 특화된 문법입니다.

async await로 비동기 프로그래밍을 작성하면 Promise의 then 메서드보다 가독성이 좋아집니다. 그렇다고 async await가 Promise를 완전히 대체하는 것은 아닙니다.

Promise는 객체로 존재하지만 async await는 함수에 적용되는 개념입니다.
async await가 반환하는 값은 항상 Promise 객체 입니다. 그래서 then 메서드를 사용 할 수 있습니다.

async await 함수 내부에서 반환하는 값이 Promise 라면 그 상태와 데이터는 그대로 반환합니다.

async/await 구문으로 작성한 예제

async function loadData() {
  const response = await fetch(url);
}

async/await 구문의 실행 원리

async await 함수 내부에서 await키워드를 사용할 수 있습니다. await키워드 오른쪽에 Promise 객체를 입력하면 그 Promise가 settled 상태가 될 때까지 기다립니다.

만약 그 Promise 객체가 fulfilled 상태가 되면 그 데이터를 이 왼쪽에 있는 변수에 저장을 하고 그렇게 첫 번째 비동기 처리가 끝나면 그 아래에 있는 코드가 실행이 됩니다. 마찬가지로 두 번째 비동기 처리가 끝나고 나면 그 다음 줄이 실행됩니다. 비동기 프로그래밍을 순차적으로 동기프로그래밍 방식으로 코드를 작성할 수 있습니다.