자바스크립트 await 키워드는 async 함수 내에서만 사용할 수 있는 특별한 키워드입니다. await는 비동기 함수 호출의 결과를 기다릴 때 사용되며, 해당 함수가 완료되고 값을 반환할 때까지 현재 함수의 실행을 일시 중지합니다. 이를 통해 비동기 코드를 동기적으로 작성할 수 있어 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.
await의 동작 원리
await 키워드를 사용하면 다음과 같은 동작이 수행됩니다.
await키워드 뒤에 오는 비동기 함수가 완료될 때까지 현재 함수의 실행이 중지됩니다.- 비동기 함수가 완료되면
await표현식은 해당 함수의 반환 값을 가지게 됩니다. await표현식의 값을 변수에 할당하거나 다른 작업에 사용할 수 있습니다.await키워드 이후의 코드부터 함수의 실행이 다시 시작됩니다.
await의 사용 방법
await는 async 함수 내에서만 사용할 수 있습니다. 따라서 async로 함수를 선언해야 합니다. 다음은 await의 기본적인 사용 방법입니다.
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
}
fetchData();
위의 예제에서 fetchData 함수는 비동기적으로 데이터를 가져오기 위해 내부적으로 fetch 함수를 호출하고 있습니다. await 키워드는 fetch 함수가 완료되고 데이터를 반환할 때까지 기다리며, 반환된 데이터를 변수 data에 할당합니다. 이후에는 data를 이용하여 원하는 작업을 수행하는 코드를 작성할 수 있습니다.
await는 프로미스에 대해서만 사용 가능하며, 비동기 함수들에 대해서는 연쇄적으로 사용할 수 있습니다. 이를 통해 여러 개의 비동기 작업을 연속적으로 실행하고 결과를 처리할 수 있습니다.
async function fetchData() {
const response1 = await fetch('https://api.example.com/data1');
const data1 = await response1.json();
const response2 = await fetch('https://api.example.com/data2');
const data2 = await response2.json();
console.log(data1, data2);
}
fetchData();
위의 예제에서는 두 개의 비동기 작업을 연달아 수행하고 있습니다. 첫 번째 fetch 함수 호출이 완료된 후에 두 번째 fetch 함수가 실행되며, 데이터를 받아와 각각 data1과 data2에 할당합니다. 그 후에는 이러한 데이터를 이용하여 원하는 작업을 수행할 수 있습니다.
await는 보통 try-catch 구문 내에서 사용되어 예외 처리를 할 수 있도록 합니다. 이를 통해 비동기 작업 중 발생하는 오류를 적절하게 처리할 수 있습니다.
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();
위의 예제에서는 try-catch 구문을 통해 fetch 함수 호출과 response.json() 호출에서 발생하는 예외를 캐치합니다. 이를 통해 오류에 대한 정보를 얻을 수 있으며, 적절한 처리를 할 수 있습니다.
결론
await 키워드는 자바스크립트에서 비동기 코드를 동기적으로 작성할 수 있도록 해주는 강력한 도구입니다. 비동기 작업의 완료를 기다리고 결과를 처리할 수 있어 코드의 가독성과 유지보수성을 향상시키는데 도움을 줍니다. await 키워드를 적절히 활용하여 비동기 코드를 작성하고 오류를 처리하는 방법을 익혀보세요.