[Javascript] async와 await의 개념과 사용법

개요

JavaScript에서 비동기 작업을 다루는 방법 중 하나인 async와 await 키워드는 ES2017(ES8)에서 도입되었습니다. 이를 통해 비동기 코드를 더욱 직관적이고 읽기 쉽게 작성할 수 있습니다. async와 await은 Promise를 기반으로 동작하며, 코드의 흐름을 동기적인 방식으로 작성할 수 있게 해줍니다.

 

1. async 함수

 

async 키워드는 함수 앞에 사용되어 해당 함수를 비동기 함수로 만듭니다. 비동기 함수는 항상 Promise를 반환합니다. 명시적으로 Promise를 반환하지 않더라도 자동으로 Promise로 감싸집니다.

 

사용법

async function myAsyncFunction() {
    return "Hello, async!";
}

myAsyncFunction().then(console.log); // "Hello, async!"

 

위 예제에서 myAsyncFunction은 async 키워드를 통해 비동기 함수가 되며, 문자열 "Hello, async!"는 자동으로 Promise로 감싸져 반환됩니다.

 

2. await 키워드

await 키워드는 async 함수 내에서만 사용할 수 있으며, Promise가 해결될 때까지 함수의 실행을 일시 정지시킵니다. Promise가 해결되면 await는 해당 Promise의 결과 값을 반환합니다.

 

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

fetchData();

 

위 예제에서 await 키워드는 fetch 함수가 반환하는 Promise가 해결될 때까지 실행을 일시 정지합니다. 그 다음, response.json()이 반환하는 Promise가 해결될 때까지 다시 실행을 일시 정지합니다.

 

3. async와 await의 장점

1. 가독성: 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 향상됩니다.
2. 에러 처리: try...catch 블록을 사용하여 비동기 함수 내에서 발생하는 에러를 쉽게 처리할 수 있습니다.
3. 디버깅: 동기 코드와 유사한 형태로 작성되므로 디버깅이 용이합니다.

 

4. 예제 코드

function resolveAfter2Seconds() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('resolved');
        }, 2000);
    });
}

async function asyncCall() {
    console.log('Calling');
    let result = await resolveAfter2Seconds();
    console.log(result);
}

asyncCall();

출력:

Calling
(2초 후)
resolved

에러 처리

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

fetchDataWithErrorHandling();

 

위 예제에서 유효하지 않은 URL을 사용하므로 fetch 호출에서 에러가 발생하며, catch 블록에서 이를 처리합니다.

 

5. async와 await의 동작 원리

• async 함수는 호출될 때 항상 Promise를 반환합니다.
• await 키워드는 Promise가 해결될 때까지 함수의 실행을 일시 정지합니다.
• await는 Promise의 결과 값을 반환하며, await로 인해 일시 정지된 부분 이후의 코드가 실행됩니다.

 

요약

• async 키워드는 함수를 비동기 함수로 만들어주며, 해당 함수는 항상 Promise를 반환합니다.
• await 키워드는 Promise가 해결될 때까지 함수의 실행을 일시 정지시킵니다.
• async와 await를 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성과 유지보수성이 향상됩니다.
• try...catch 블록을 사용하여 비동기 함수 내에서 발생하는 에러를 쉽게 처리할 수 있습니다.

 

async와 await를 사용하면 콜백 지옥이나 복잡한 Promise 체인을 피할 수 있어, 비동기 작업을 보다 직관적이고 간결하게 작성할 수 있습니다.