async와 await

async

async란 함수앞에 붙어 promise를 반환하게 한다.

async function helloAsync() {
    return "hello Async"; 
}

• async가 붙은 함수 helloAsync는 Promise가 된다.
• return의 값은 resolve가 된다.

helloAsync().then((res) => {
    console.log(res);
})

결과값: hello Async

• helloAsync()가 Promise이므로 then을 이용한다.
• res는 resolve값이므로 return의 값이 매개변수로 온다.

await

• await는 비동기함수 앞에 붙어 비동기함수의 작업이 끝나기 전까지 밑의 작업을 실행하지 않는다.
• await은 async가 붙은 함수 내에서만 사용할 수 있다.

function delay (ms) {
    return new Promise((resolve) => {
        setTimeout(resolve, ms);
    });
}

async function helloAsync() {
    return delay(3000).then(() => {
        return "hello Async";
    });
}

helloAsync().then((res) => {
    console.log(res);
})

• helloAsync()에 delay()를 붙여쓰려면 위와같이 then을 이용해야 한다.
  -> 이때 await를 사용하면 then을 이용하지 않고 가독성을 높일 수 있다.

function delay (ms) {
    return new Promise((resolve) => {
        setTimeout(resolve, ms);
    });
}

async function helloAsync() {
   await delay(3000);
   return "hello Async";

}

async function main() {
    const res = await helloAsync();
    console.log(res);
}

main();

• async가 있는 helloAsync()에서 await를 사용하여 delay()가 끝나기 전까진 return은 실행되지 않는다.

• main()또한 상수 res에 await를 붙인 함수를 만들어 주었으므로 helloAsync()의 작업이 끝나기 전까지는 console.log()가 실행되지 않는다.
  -> 만약 res에 await를 붙이지 않으면 helloAsync()가 3초동안 대기하므로 res = Promise { pending } 즉, 대기상태가 된다.