자바스크립트 async/await 사용법, 비동기 함수와 에러 처리

자바스크립트 async/await 사용법, 비동기 함수와 에러 처리

자바스크립트에서 비동기 프로그래밍은 웹 애플리케이션의 성능을 극대화하고 사용자 경험을 향상시키는 데 필수적입니다. async와 await 키워드는 자바스크립트의 비동기 작업을 간단하고 읽기 쉽게 만들어 줍니다. 이 글에서는 async와 await의 기본 개념부터 실제 사용 예제와 에러 처리 방법까지 다루어 보겠습니다.

 

 

목차

1. async/await란?
2. 기본 사용법
3. 실제 예제
4. 에러 처리 방법
5. 병렬 작업 처리
6. 결론

 

1. async/await란?

async와 await는 ES2017(ES8)에서 도입된 자바스크립트의 비동기 처리 문법입니다. async 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스가 처리될 때까지 함수 실행을 일시 정지시킵니다.

 

 

2. 기본 사용법

async 키워드를 함수 앞에 붙여서 비동기 함수를 선언할 수 있습니다. await 키워드는 async 함수 내에서만 사용할 수 있으며, 프로미스가 해결될 때까지 기다립니다.

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

 

 

3. 실제 예제

async와 await를 사용하면 비동기 코드가 마치 동기 코드처럼 읽히게 됩니다. 아래 예제는 데이터를 가져와서 출력하는 비동기 함수입니다.

async function getUserData() {
    try {
        const response = await fetch('https://api.example.com/user');
        const user = await response.json();
        console.log(user);
    } catch (error) {
        console.error('Error fetching user data:', error);
    }
}

getUserData();
            

 

 

 

 

4. 에러 처리 방법

async 함수 내에서 await 키워드를 사용한 비동기 호출은 try...catch 블록을 사용하여 에러를 처리할 수 있습니다. 이는 프로미스의 .catch() 메서드를 사용하는 것보다 간단하고 직관적입니다.

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching data:', error);
        throw error;
    }
}
            

 

 

5. 병렬 작업 처리

await 키워드를 사용하면 비동기 작업을 직렬로 처리하게 됩니다. 병렬로 작업을 처리하려면 Promise.all()을 사용하여 여러 프로미스를 동시에 실행할 수 있습니다.

async function fetchAllData() {
    try {
        const [data1, data2] = await Promise.all([
            fetch('https://api.example.com/data1').then(res => res.json()),
            fetch('https://api.example.com/data2').then(res => res.json())
        ]);
        console.log(data1, data2);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

fetchAllData();
            

 

 

6. 결론

async와 await는 자바스크립트 비동기 프로그래밍을 단순화하고 가독성을 높이는 강력한 도구입니다. 이 가이드를 통해 비동기 함수 작성과 에러 처리, 병렬 작업 처리 방법을 익히고, 실제 프로젝트에서 async와 await를 활용해 보세요.