Async & Await

Async Await는 Promise객체 보다 쉽게 사용할 수 있게 해주는 문법이다. Promise를 기반으로 하지만 Async함수 내에서 await를 이용해 비동기를 동기처럼 작동시킬 수 있다.

function delays(s) {
    return new Promise((resolve)=>{
       setTimeout(()=>{
           resolve(s+"ms 경과");
       }, s); 
    });
}

async function asyncHandle() {
    console.log("Async & Await");
    const times = await delays(5000);
    console.log(times);
}

asyncHandle();
// Async & Await
// ...5초후(실제로 이런 콘솔이 찍히진 않습니다. 이해하기 쉽게 글로 적은것)
// 5000ms 경과

위 코드를 보면 asyncHandle함수를 실행시키게되면 먼저 콘솔로그가 찍히고, times의 값이 할당되는데 5초의 시간이 경과 한 것을 확인할 수 있다.

Async Await 없이 비동기를 실행하게되면 아래와 같은 결과가 나오게된다.

const delay = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("5000");
    },5000);
});
const delay2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("3000");
    },3000);
});

function promiseHandle() {
    delay.then((response)=>{
        console.log(response);
    });
    delay2.then((response)=>{
        console.log(response);
    });
}
promiseHandle();
// 3000
// 5000

delay와 delay2를 바꿔도 결과는 똑같이 나오게된다. 비동기 이기 때문에 내가 delay를 먼저 출력하고싶어도 delay2가 먼저 출력되게된다.
이때 사용하게되는게 async await 이다.

const delay = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("5000");
    },5000);
});
const delay2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("3000");
    },3000);
});

async function asyncHandle() {
    await delay.then((response)=>{
        console.log(response);
    });
    await delay2.then((response)=>{
        console.log(response);
    });
}
asyncHandle();
// 5000
// 3000

async를 이용해 async내부의 비동기 객체들을 동기화시켜 delay의 결과값을 기다리다 5000을 먼저 출력하고 그 이후 3000이 출력되는 모습일 볼 수 있다.