Async 와 await

[!NOTE] 요약 await 키워드 뒤에 작성된 코드도 promise를 반환하고 이 promise의 해결(반환)이 올때까지 기다렸다가 다음 라인으로 넘어간다는 뜻

async는 함수 전체에 대한 비동기 특성을 명시하는 것이고, await는 특정 비동기 연산이 완료될 때까지 기다리도록 하는 것입니다. await를 사용하면 해당 부분의 코드는 “동기적으로 동작하는 것처럼” 보이도록 하는 것

async와 await는 JavaScript의 ES2017(ES8)에 도입된 키워드로, 비동기 프로그래밍을 좀 더 간결하고 가독성 좋게 작성할 수 있게 해줍니다. 특히 Promise를 기반으로 동작하는 코드에 대해 동기적인 방식처럼 작성할 수 있게 도와줍니다.

1. async
   • async 키워드는 함수 앞에 위치하며, 해당 함수가 비동기적으로 동작한다는 것을 표시합니다.
   • async로 선언된 함수는 항상 Promise를 반환합니다. 반환 값이 Promise가 아닌 경우에도, JavaScript는 이 값을 자동으로 Promise로 감싸서 반환하게 됩니다. 예시

     async function fetchUserData() {
       // ...
     }
     

2. await
   • await 키워드는 async 함수 내부에서만 사용될 수 있으며, Promise의 해결을 기다립니다.
   • await는 Promise가 완료될 때까지 함수의 실행을 일시 중지시키고, Promise의 결과 값을 반환하게 됩니다. 만약 Promise가 거부될 경우, 거부된 이유를 던지게 됩니다.
   • 이를 통해 Promise 체인의 .then()과 .catch 메서드를 사용하는 대신에, 동기적인 코드 스타일로 비동기 처리를 할 수 있게 됩니다.

This line appears after every note.