ES6(ECMAScript 2015) – async/await – 1 – await 키워드
소제목: await 키워드란?
ES6(ECMAScript 2015)에서 도입된 async/await는 비동기적인 코드를 작성하는 데 도움이 되는 키워드입니다. await 키워드는 비동기 함수 내에서 사용되며, Promise 객체를 반환하는 비동기 작업이 완료될 때까지 코드 실행을 일시 정지시킵니다. 이를 통해 비동기 작업의 결과를 동기적인 방식으로 다룰 수 있게 됩니다.
예시:
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
}
fetchData();비유적인 표현으로 이해하기
await 키워드는 마치 전화를 걸고 상대방이 전화를 받을 때까지 기다리는 것과 비슷합니다. 비동기 작업을 수행하는 동안 await 키워드를 만나면, 자바스크립트는 그 자리에서 코드 실행을 멈추고, 비동기 작업의 결과가 반환될 때까지 기다립니다. 마치 상대방이 전화를 받을 때까지 아무런 다른 작업을 하지 않는 것과 비슷하죠. 그리고 비동기 작업이 완료되면, 결과를 받아온 뒤 코드 실행을 계속 진행합니다.
await 키워드의 동작 과정
- await 키워드를 만나면, 뒤에 오는 비동기 작업(Promise 객체)을 실행합니다.
- 실행된 비동기 작업이 완료되기를 기다립니다. 이때, await 키워드를 만난 코드 라인에서 코드 실행이 멈춥니다.
- 비동기 작업이 완료되면, Promise가 처리(resolve)되면서 결과 값을 반환합니다.
- await 키워드가 반환된 결과 값을 변수에 할당하거나, 다른 처리를 위해 사용합니다.
- 코드 실행은 await 키워드 다음 라인부터 이어서 진행됩니다.
주의해야 할 점
- await 키워드는 async 함수 내에서만 사용할 수 있습니다.
- await 키워드를 사용하는 함수는 해당 함수가 반환하는 값이 Promise 객체임을 나타내는 async 키워드로 선언되어야 합니다.
- await 키워드를 사용하는 비동기 작업은 Promise를 반환하는 비동기 함수, fetch API 호출, XMLHttpRequest 요청 등이 될 수 있습니다.
- await 키워드는 오직 비동기 작업이 완료될 때까지 기다리는 데에만 사용되며, 동기 작업에서 사용할 수 없습니다.
여기서는 await 키워드에 대해 소개하였으니, 다음에는 async 함수와 함께 사용되는 await 키워드의 실제 활용 예시와 함께 더 자세한 내용을 알아보도록 하겠습니다.