[JS] 비동기 프로그래밍(3) : Async/Await

안녕하세요. 오늘은 자바스크립트 Async/Await에 대해 알아보도록 하겠습니다. (유튜브 '코드팩토리'님의 강의 일부를 참고하였습니다.)

 

 

 

Async/Await란?

자바스크립트에서 비동기 코드를 동기 코드처럼 작성할 수 있게 해주는 문법이며, 'async'와 'await' 키워드는 프로미스(Promise)와 함께 사용되며 비동기 작업의 결과를 기다린 후 코드를 계속 실행할 수 있게 해줌

 

async

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

await

• async 함수 내에서만 사용할 수 있으며 프로미스가 이행(fulfilled)되거나 거부(rejected)될 때까지 기다림
• await는 프로미스의 이행 결과를 반환하거나, 거부된 경우 에러를 던짐
• promise를 반환하는 것에만 사용할 수 있음

 

 

 

Async/Await 사용 방법

async 함수 정의

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

myAsyncFunction().then(result => console.log(result)); // Hello, 뭉이!

위 코드에서 'myAsyncFunction'은 'async' 키워드를 사용하여 정의된 함수이며, 이 함수는 기본적으로 프로미스를 반환하고 반환 값은 자동으로 'resolve'됨

 

await 키워드 사용

'await' 키워드를 사용하면 비동기 작업이 완료될 때까지 코드의 실행을 일시적으로 중지할 수 있음

이로 인해 코드가 동기적으로 작성된 것처럼 보이게 됨

function resolveAfter2Seconds() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('2초 후 완료');
        }, 2000);
    });
}

async function asyncCall() {
    console.log('호출 시작');
    const result = await resolveAfter2Seconds();
    console.log(result); // '2초 후 완료' 출력
    console.log('호출 끝');
}

asyncCall();
// 호출 시작
// 2초 후에 '2초 후 완료' 출력
// 호출 끝

위 코드에서 'await resolveAfter2Seconds()'는 프로미스가 이행될 때까지 기다림. 그럼 그 동안 다른 코드의 실행은 중지되며 프로미스가 이행되면 'result'에 그 결과를 할당하고 코드 실행이 계속됨

 

예시)

const getPromise = (seconds) => new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('완료');
    }, seconds * 1000);
});

async function runner() {
    const result1 = await getPromise(1);
    console.log(result1); // 1초 후 '완료' 출력

    const result2 = await getPromise(2);
    console.log(result2); // 추가로 2초 후 '완료' 출력

    const result3 = await getPromise(1);
    console.log(result3); // 추가로 1초 후 '완료' 출력
}
// 총 4초 후에 '완료' 메시지가 순차적으로 출력

 

 

 

에러 처리

async/await에서도 'try/catch'를 사용하여 에러를 처리할 수 있음

또한, 'finally'를 사용해 모든 작업이 완료된 후 실행할 코드를 작성할 수 있음

const getPromise2 = (seconds) => new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('에러 발생!');
    }, seconds * 1000);
});

async function runner2() {
    try {
        const result1 = await getPromise2(1);
        console.log(result1);

        const result2 = await getPromise2(2);
        console.log(result2);

        const result3 = await getPromise2(1);
        console.log(result3);
    } catch (e) {
        console.log('--- catch e ---');
        console.log(e); // 에러 발생 시 메시지 출력
    } finally {
        console.log('--- finally ---');
    }
}
runner2();
// 1초 후에 '--- catch e ---' '에러 발생!' '--- finally ---' 순으로 출력

이 코드에서는 'getPromise2' 함수가 1초 후에 에러를 발생시키며 try/catch 블록에서 이를 처리함

에러가 발생하면 'catch' 블록이 실행되고, 마지막으로 'finally'이 실행됨