JavaScript 비동기 처리 심화: async/await와 Promise 활용하기

JavaScript에서 비동기 처리는 웹 애플리케이션의 성능을 최적화하는 데 매우 중요합니다. 이번 글에서는 비동기 처리를 더욱 효율적으로 다루기 위해 async/await와 Promise를 활용하는 방법을 알아보겠습니다.

 

1. Promise 기본 이해

Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. Promise는 pending, fulfilled, rejected 세 가지 상태를 가집니다.

let promise = new Promise((resolve, reject) => {
    // 비동기 작업 수행
    if (/* 성공 */) {
        resolve('성공');
    } else {
        reject('실패');
    }
});

promise.then(result => {
    console.log(result); // 성공 시 실행
}).catch(error => {
    console.error(error); // 실패 시 실행
});

 

 

2. async/await 소개

async/await는 Promise를 더 간단하게 사용할 수 있도록 도와줍니다. async 키워드를 함수 앞에 붙여 비동기 함수를 만들고, await 키워드를 사용해 Promise가 해결될 때까지 기다릴 수 있습니다.

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

fetchData();

 

 

3. 실제 예제: API 호출

API 호출 시 비동기 처리가 자주 필요합니다. async/await를 사용하면 코드를 더 직관적으로 작성할 수 있습니다.

async function getUserData(userId) {
    try {
        let response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        let userData = await response.json();
        console.log(userData);
    } catch (error) {
        console.error('Fetch error:', error);
    }
}

getUserData(1);

 

 

4. 여러 비동기 작업 처리

여러 개의 비동기 작업을 순차적으로 처리해야 할 때도 async/await가 유용합니다.

async function processUsers(userIds) {
    for (let id of userIds) {
        await getUserData(id);
    }
}

processUsers([1, 2, 3]);

 

 

5. 결론

async/await와 Promise를 활용하면 복잡한 비동기 작업을 더 쉽게 관리할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다.

더 많은 예제와 정보를 원하시면 MDN 문서를 참고하세요.

이렇게 하면 여러분의 JavaScript 비동기 처리가 더욱 강력해질 것입니다. Happy coding!