Async, Await ( + Promise)

---

Async

Async, Await 모두 비동기 코드를 더 읽기 쉽고 동기적으로 작성할 수 있도록 도와주는 키워드이다. 

 

async 는 함수 선언 앞에 사용되며, 해당 함수가 비동기적으로 동작함을 나타낸다. 

 

async로 선언된 함수는 항상 프로미스를 반환한다. 

 

 

Await

await은 async 함수 내에서 사용되며, 다른 프로미스를 기다렸다가 해당 프로미스가 처리되고 값을 반환한 후에 다음 코드로 진행된다. 

 

이를통해 비동기 작업을 동기적으로 작성하는 것처럼 보이게 만들 수 있어서 코드의 가독성이 높아지고, 콜백지옥 문제를 피할 수 있다. 

 

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("Data fetched"), 1000);
    });
}

async function fetchDataAsync() {
    const result = await fetchData();
    console.log(result); // "Data fetched"
}

fetchDataAsync();

 

fetchDataAsync 함수를 호출하면 fetchData() 가 처리완료될 때까지 기다린 후 콘솔이 찍히게 된다. 

 

이처럼 async, await 을 통해 비동기처리를 하면서 코드가 순차적이고 구조적으로 보이게 만들 수 있다. 

 

 

---

async, await 과 Promise의 차이

특성	async/await	Promise
구문	async 함수 내에서 await 사용	.then() 및 .catch() 메서드로 체이닝
가독성	동기 코드와 유사한 구조로 가독성 높음	중첩되는 콜백 함수로 가독성 저하될 수 있음
에러 처리	try/catch 블록으로 명확하고 간편한 에러 처리	.catch() 메서드로 에러 처리
순차적 처리	순차적 코드로 작성 가능	체이닝을 통해 비동기 작업 연결
가능성	모든 async 함수에서 사용 가능	모든 프로미스에서 사용 가능

 

• 구문 및 가독성
  • async, await 함수는 순차적으로 보이며, 동기적인 코드와 유사한 코드를 갖추게 되지만,
  • 프로미스는 .then() 과 .catch() 메서드를 사용하여 비동기 작업을 다루기 때문에, 콜백함수의 체인으로 가독성이 저하 될 수 있다.
• 에러처리
  • 프로미스는 .catch() 메서드를 이용하여 에러를 처리한다. 여러번 중첩된 콜백 함수의 경우 오류처리가 어려울 수 있다.