JS async와 await

Source: Dev.to

async와 await란?

• async와 await는 비동기 작업을 더 깔끔하게 처리하기 위해 사용됩니다.

왜 비동기 코드가 필요할까?

• JavaScript는 단일 스레드이기 때문에 한 번에 하나의 작업만 수행할 수 있습니다. 실제 상황에서는 서버에서 데이터 가져오기, 파일 읽기, 타이머 대기 등 시간이 오래 걸리는 작업이 많습니다. JS가 이러한 작업이 끝날 때까지 기다린다면 브라우저가 멈추고 응답하지 않게 됩니다.
• 비동기 프로그래밍을 사용하면 JS가 느린 작업을 시작하고, 다른 코드를 계속 실행한 뒤 결과가 준비되었을 때 다시 처리할 수 있어 메인 스레드를 차단하지 않습니다.

주요 사용 사례

• API에서 데이터 가져오기 (네트워크 요청)
• 파일 읽기/쓰기 (Node.js)
• setTimeout / setInterval (타이머)
• 데이터베이스 쿼리

진화 과정: 콜백 → 프로미스 → Async/Await

콜백 (구식 방식)

setTimeout(() => {
    console.log("Prepping");
    setTimeout(() => {
        console.log("Cooking");
        setTimeout(() => {
            console.log("Eating");
        }, 3000);
    }, 5000);
}, 1000);

prepping();

프로미스 (향상된 방식)

function prepping() {
    return new Promise((resolve, reject) =>
        setTimeout(() => resolve("Prepping"), 1000)
    );
}
function cooking() {
    return new Promise((resolve, reject) =>
        setTimeout(() => resolve("Cooking"), 5000)
    );
}
function eating() {
    return new Promise((resolve, reject) =>
        setTimeout(() => resolve("Eating"), 3000)
    );
}

prepping()
    .then(response => {
        console.log(response);
        return cooking();
    })
    .then(response => {
        console.log(response);
        return eating();
    })
    .then(response => console.log(response));

async/await (현대적이고 가장 깔끔한 방식)

function prepping() {
    return new Promise((resolve, reject) =>
        setTimeout(() => resolve("Prepping"), 1000)
    );
}
function cooking() {
    return new Promise((resolve, reject) =>
        setTimeout(() => resolve("Cooking"), 5000)
    );
}
function eating() {
    return new Promise((resolve, reject) =>
        setTimeout(() => resolve("Eating"), 3000)
    );
}

async function asynfunction() {
    const prep = await prepping();
    console.log(prep);
    const cook = await cooking();
    console.log(cook);
    const eat = await eating();
    console.log(eat);
}

asynfunction();

문법 규칙

• async 키워드는 함수 선언이나 표현식 앞에 붙입니다.
• 이 키워드를 사용하면 함수는 항상 Promise를 반환합니다. (단순 값이라도 Promise로 감싸서 반환)
• await는 오직 async 함수 내부에서만 사용할 수 있습니다.

async function greet() {
    return "Hello";
}

console.log(greet()); // Promise { : 'Hello' }
greet().then(response => console.log(response)); // Hello