JavaScript - async, await

Async와 Await

JavaScript에서 비동기 코드를 보다 간결하고 명확하게 작성할 수 있도록 도와주는 키워드

Async

async 키워드를 함수 앞에 붙이면 해당 함수는 항상 프로미스를 반환
async 함수 내에서 await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있음

async function fetchData() {
    // 비동기 작업을 수행하고 완료될 때까지 기다림
    const result = await fetch('https://api.example.com/data');
    const data = await result.json();
    return data;
}

// async 함수를 호출하면 항상 프로미스가 반환됨
fetchData().then(data => {
    console.log(data);
}).catch(error => {
    console.error(error);
});

Await

async 함수 내에서만 사용할 수 있음
await 다음에는 프로미스가 오며, 프로미스가 처리(resolve)될 때까지 대기하고, 그 결과를 반환
await를 사용하면 비동기 코드를 동기식으로 작성할 수 있어 가독성이 향상

async function fetchData() {
    const result = await fetch('https://api.example.com/data');
    const data = await result.json();
    return data;
}

async와 await를 사용하면 콜백이나 프로미스 체이닝을 사용하는 것보다 코드가 간결해지고 이해하기 쉬워짐
그러나 주의할 점은 await는 async 함수 내에서만 사용할 수 있으며, 최상위 레벨에서는 사용할 수 없음!!
=> 따라서 최상위 레벨에서 비동기 코드를 처리해야 할 때에는 then()과 catch() 메서드를 사용