async / await

자바스크립트에서 비동기 처리를 하는 방법에는 콜백 함수와 프로미스가 있는데 둘 다 약간의 문제점들이 있다. 이러한 문제점들을 해결하기 위해 ES8에서 async / await이 등장하게 되었다.

기본 문법

function 앞에 async를 붙여주고 비동기로 처리되는 부분 앞에 await을 붙여주면 된다. await는 async 함수 내부에서만 사용이 가능하다.

• async가 붙은 함수는 프로미스를 반환하며, 프로미스가 아닌 것은 프로미스로 감싸서 반환한다.
• await을 만나면 프로미스가 처리 될 때까지 기다린다.

프로미스

function cat() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("야옹"), 1000);
    });
}

function dog() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("멍멍"), 1000);
    });
}

function animal() {
    cat().then((q) => {
        dog().then((w) => console.log(`${q} ${w}`));
    });
}

animal(); // "야옹 멍멍"

프로미스에서 "야옹"과 "멍멍"을 동시에 가져오려면 then()으로 연결하여 가져와야한다. 그리고 프로미스 함수가 더 많아지면 결국 콜백지옥과 같은 현상이 일어나게 된다.

asnyc / await

function cat() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("야옹"), 1000);
    });
}

function dog() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("멍멍"), 1000);
    });
}

async function animal() {
    let q = await cat();
    let w = await dog();

    console.log(`${q} ${w}`);
}

animal(); // "야옹 멍멍"

async / await를 쓰면 위의 코드와 같이 간단하게 만들 수 있다.

async / await의 예외처리

async / await의 예외처리는 try...catch 문법을 이용하면 된다.

function cat() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("야옹"), 1000);
    });
}

function dog() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("멍멍"), 1000);
    });
}

async function animal() {
    try {
        let q = await cat();
        let w = await dog();
        console.log(`${q} ${w}`);
    } catch (e) {
        console.error(e);
    }
}

animal(); // "야옹 멍멍"

참고한 사이트 :
https://joshua1988.github.io/web-development/javascript/js-async-await/
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC-async-await