[JS] 자바스크립트 async와 await: 비동기 함수의 작업이 끝날 때까지 대기

 자바스크립트의 비동기 함수를 나타내는 async 키워드를 활용하면, await를 통해 쉽게 작업이 끝날 때까지 대기시킬 수 있습니다. 이에 대해 자세히 알아보겠습니다.

 

[ Contents ]

 

 

1. promise 객체

const delay = (ms) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("delay 실행");
            resolve();
        }, ms);
    });
};

const start = () => {
    delay(200).then(() => {
        console.log("완료");
    });
};

start();

 promise 객체는 비동기로 실행되는 함수를 담고 있습니다. 위 예제는 promise 객체를 반환하는 delay 함수를 구현한 코드입니다. 위와 같이 promise 객체를 반환하는 비동기 함수로 구현하곤 합니다.

 그래야 함수 뒤에 .then이나 .cache를 덧붙여서 사후 작업을 쉽게 작성할 수 있습니다.

 

2023.09.27 - [PL (Programming Language)/JavaScript] - [JS] 자바스크립트 비동기 객체 Promise: resolve - then, reject - catch

[JS] 자바스크립트 비동기 객체 Promise: resolve - then, reject - catch

 

 

2. async와 await

async: 비동기 함수를 나타내는 키워드 (프로미스 객체 반환)
await: async 함수 내에서 해당 비동기 함수가 끝날 때까지 대기

 

 async는 'asynchronous'의 줄임말로, 비동기의 의미를 갖고 있습니다. async가 붙은 함수는 무조건 프로미스 객체를 반환하며 비동기 함수를 나타냅니다.

 await는 대기하라는 뜻으로, 해당 비동기 함수가 끝날 때까지 대기합니다. async 함수 내에서만 사용가능하며, 순차적으로 진행되야 하는 작업에 유용합니다.

 

 

const delay = (ms) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("대기")
            resolve();
        }, ms);
    });
};

const start = async () => {
    await delay(200);
    console.log("종료");

};

start();

 위 코드는 delay(200) 후에 종료됩니다. await 키워드가 있기 때문에, delay 프로미스 객체가 반환될 때까지 대기합니다.

 

const delay = (ms) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("대기")
            resolve();
        }, ms);
    });
};

const start = async () => {
    delay(200);
    console.log("종료");

};

start();

 반면 await가 없다면, delay(200)만 호출하고 그다음줄로 넘어가기 때문에 console.log("종료")가 먼저 실행됩니다.

 여기서는 delay함수였지만, 데이터를 받아오거나 처리된 결과를 받아온 후 실행되어야 하는 코드라면 await를 꼭 써줘야 합니다.

 

반응형

 

3. API에서의 async, await 활용

const getData = async () => {
    try {
        const response = await fetch("<https://jsonplaceholder123.typicode.com/posts>");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.log(`error : ${error}`);
    }
};

getData();

 자바스크립트는 동적인 웹 페이지를 위해 웹 서버와 통신하는 기능을 수행합니다. 주로 API로 json 형태의 데이터를 주고 받는 일을 하죠.

 해당 함수는 비동기(async)로 구현되어 있으며, await를 활용하면 해당 작업이 끝날 때까지 쉽게 지연시킬 수 있습니다. 위 코드에서는 데이터를 fetch받은 후, json 바디를 불러오고, 출력하고 있습니다. 만약 await가 없었다면 console.log(data)가 가장 먼저 실행되어서 오류가 났겠죠.

 이처럼 async, await를 사용하면, 간편하게 작업 순서를 제어할 수 있습니다.

 

<관련 참고자료>

6. API 호출 - 4. 자바스크립트 심화