async / await

Promise보다 더욱 사용하기 편리하고 쉬운 async/await 문법에 대해서 알아 보도록 한다.

async/await 는 기존의 비동기 처리 방식인 callback과 promise의 단점을 보완하고 가독성을 높여준다는 장점이 있다.

JavaScript에서는 특히 비동기 처리 방식 때문에 위에서 아래로 진행되는 일반적인 코드의 흐름이 아닌 경우가 꽤 있다.

async/await 는 이러한 단점을 보완하고 위에서 아래로 코드가 진행되도록 한다.

async function getA() {
    return "A";
}

function 앞에 async 키워드를 붙이는 순간 반환 값은 항상 Promise 이다.
이 값을 불러오기 위해서 then() 을 사용하곤 한다.

async function getA() {
    return "A";
}

getA()
  .then((res) => {
    console.log(res)
  })

비록 위의 코드는 then 하나에서 끝나지만 이러한 then과 그 안의 callback 함수가 많아지면 많아질수록
코드를 이해하기 힘들고 흐름을 파악하기도 어렵다.

async / await 활용

위의 코드를 async / await를 활용하여 다른 방식으로 표현해 보도록 한다.

async function getA() {
    return "A";
}

// Error!!
const a = await getA();

여기서 주의할 점은 await 는 async 함수 안에서만 동작한다.

async function getA() {
    return "A";
}

async function f() {
    const a = await getA();
    console.log(a);
}

f(); // "A"