[JS] 자바스크립트 async 와 await (ft. 비동기처리)

 

자바스크립트 async와 await  ; 비동기 처리를 더 쉽게 !  

 

비동기 작업을 다루기 위해 자바스크립트는 다양한 방법을 제공한다.

 

promise 개념과 더불어 async와 await 키워드를 사용하면 비동기 코드를 깔끔하고 읽기 쉽게 만들 수 있다.

 

 

---

 

1. async 키워드란?

async는 함수를 비동기 함수로 만들어주는 키워드이다.

• async를 함수 앞에 붙이면, 해당 함수는 항상 Promise를 반환한다.
• 반환값이 Promise가 아니더라도 자동으로 Promise로 감싸서 반환된다.

async function getData() {
    return {
        name: "David",
        id: "d0228",
    };
}

console.log(getData());

 

위 코드의getData()를 실행하면 객체 자체가 반환되는 것이 아니라,

해당 객체를 결과 값으로 갖는 Promise 객체가 반환된다.

 

*promise 상태 참고

pending (대기)	작업이 아직 완료되지 않은 상태
fulfilled (성공)	작업이 성공적으로 완료된 상태 (resolve 호출)
rejected (실패)	작업이 실패한 상태 (reject 호출)

Promise {<fulfilled>: {name: "David", id: "d0228"}}

 

즉, async 함수는 항상 PromiseResult를 감싸서 반환한다고 이해하면 된다.

 

 

 

 

---

 

 

2. async 함수 내부에서 Promise 반환하기

async 함수 내부에서 원래 Promise를 반환하는 경우에는, 해당 Promise가 그대로 사용된다.

async function getData1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                name: "이정수",
                id: "summerwinnner",
            });
        }, 1500);
    });
}

console.log(getData1());

Promise {<pending>}

 

1.5초 후 resolve가 호출되면서 Promise는 fulfilled 상태로 전환되고, 데이터가 반환된다.

정리하자면, 비동기 작업이 필요한 경우 async 함수 내부에서 직접 Promise를 반환하는 방식으로 구현하면 된다.

 

---

 

3. await 키워드란?

await는 async 함수 내부에서만 사용할 수 있는 키워드이다.

• await는 Promise가 처리될 때까지 기다렸다가 다음 코드를 실행하게 만든다.
• 기존에는 .then() 메서드를 사용해야 했지만, await를 사용하면 동기 코드처럼 자연스럽게 흐름을 구성할 수 있다.

async function printData() {
    const data = await getData();
    console.log(data);
}

printData();

 

• await getData()는 getData()가 반환하는 Promise가 완료될 때까지 기다린다.
• 완료되면 그 결과 값이 data 변수에 저장된다.
• 이후 console.log(data)가 실행된다.

{name: "David", id: "d0228"}

 

 

 

---

 

4. await가 없다면?

await 없이 비동기 작업을 처리하려면 .then()을 사용해야 한다.

getData().then((data) => {
    console.log(data);
});

 

await를 사용하면
.then() 체인을 구성하지 않아도 되며, 코드가 더 간결하고 읽기 쉬워진다.

 

 

---

5. async / await 요약 

 

async	함수를 비동기 함수로 만들어 Promise를 반환하게 함
await	Promise가 처리될 때까지 기다렸다가 다음 코드를 실행함 (async 함수 내부에서만 사용 가능)

 

 

---

 

 

💡정리

 

async와 await를 사용하면 비동기 작업을 훨씬 더 직관적으로, 동기 코드처럼 작성할 수 있다.

Promise와 then을 사용하는 것도 유용하지만, 복잡한 비동기 흐름을 다룰 때는 async/await를 적극적으로 활용하는 것이 좋다.