async와 await

개념 이해하기

async 함수는 항상 Promise를 반환하고 await는 해당 Promise가 settled될 때까지 그 async 함수의 나머지만 잠시 멈춥니다. 페이지 전체 JavaScript가 멈추는 것은 아닙니다. reject는 await 지점에서 throw되므로 try/catch로 실패를 처리합니다.

클릭하면 괄호로 감싸 바로 호출한 async 화살표 함수가 먼저 불러오는 중...을 표시하고, await wait에서 그 함수의 나머지만 멈춘 채 클릭 처리 함수는 곧바로 끝납니다. 약 120밀리초 뒤 Promise가 강좌를 불러왔습니다.로 이행되면 await 다음 줄이 이어서 실행되어 화면을 바꿉니다. async 함수를 즉시 호출하는 이 형태는 async가 아닌 함수 안에서 await를 쓰고 싶을 때 씁니다.

await는 async 함수 안에서만 쓸 수 있지만, type=module 스크립트의 최상위에서는 함수로 감싸지 않고 바로 await를 쓸 수 있습니다. 또 await 뒤에 Promise가 아닌 값이 오면 그 값이 그대로 나오되, 다음 줄은 여전히 현재 동기 작업이 끝난 뒤 microtask로 이어서 실행됩니다.