Javascript async/await 완벽 이해

Javascript async/await 완벽 이해

자바스크립트에서 비동기 작업을 처리하는 방식 중 하나가 바로 async/await입니다. 이 두 가지를 활용하면 비동기 코드를 더 깔끔하고 직관적으로 작성할 수 있습니다. 이번 글에서는 async/await의 개념과 사용법을 단계별로 살펴보겠습니다.

async/await의 개념

async와 await는 자바스크립트에서 비동기 작업을 보다 간결하게 처리할 수 있는 구문입니다. async는 함수 앞에 붙여서 비동기 함수를 정의하고, await는 그 함수 안에서 사용하여 프로미스를 기다릴 수 있게 해줍니다.

async 함수 정의 및 반환값

async function fetchData() {
    return "데이터를 성공적으로 가져왔습니다.";
}

fetchData().then(result => console.log(result));  // "데이터를 성공적으로 가져왔습니다." 출력
        

async로 선언된 함수는 항상 프로미스를 반환합니다. 즉, 함수가 값을 반환하더라도 내부적으로 프로미스로 감싸서 반환합니다.

await의 사용법

async function fetchData() {
    const data = await new Promise((resolve, reject) => {
        setTimeout(() => resolve("데이터를 가져왔습니다."), 1000);
    });
    console.log(data);  // "데이터를 가져왔습니다." 출력
}

fetchData();
        

await는 프로미스가 처리될 때까지 기다린 후 그 값을 반환합니다. 이때 await는 async 함수 내에서만 사용할 수 있습니다.

async/await와 Promise 비교

async/await는 Promise의 문법을 간소화한 것으로, 프로미스를 사용한 비동기 코드와 동일한 결과를 얻을 수 있습니다. 하지만 async/await는 코드의 가독성을 높여주고, 콜백 지옥을 피하는 데 유리합니다.

// Promise 사용
const fetchDataPromise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Promise로 데이터 가져옴"), 1000);
});

fetchDataPromise
    .then(data => console.log(data));

// async/await 사용
async function fetchData() {
    const data = await new Promise((resolve, reject) => {
        setTimeout(() => resolve("async/await로 데이터 가져옴"), 1000);
    });
    console.log(data);
}

fetchData();
        

두 코드 모두 동일한 결과를 출력하지만, async/await는 코드 흐름을 더 직관적으로 만들어 줍니다.

에러 처리

async function fetchData() {
    try {
        const data = await new Promise((resolve, reject) => {
            setTimeout(() => reject("에러 발생!"), 1000);
        });
        console.log(data);
    } catch (error) {
        console.log("에러 처리:", error);  // "에러 발생!" 출력
    }
}

fetchData();
        

async/await에서는 try/catch 구문을 활용하여 비동기 코드에서 발생할 수 있는 에러를 처리할 수 있습니다.