async / await

async/await는 비동기 작업을 쉽게 처리할 수 있도록 ES8에서 도입된 자바스크립트 기능임.

Promise 기반의 비동기 코드를 동기식 코드처럼 작성할 수 있게 해주는 문법으로, 비동기 작업의 가독성을 크게 향상시킴.

Q. (비)동기가 뭔데 ?

A. https://jerrycodezzz.tistory.com/54

동기(Synchronous) 비동기(Asynchronous)

 

async 함수

• async 키워드를 함수 앞에 붙이면, 해당 함수는 자동으로 Promise를 반환함. 즉, 함수 내부에서 비동기 작업을 처리하더라도 async 함수는 항상 Promise 객체를 반환하게 됨.

async function fetchData() {
  return "data loaded";
}

fetchData().then(result => console.log(result)); // "data loaded"

fetchData 함수는 async로 선언되어 있기 때문에 자동으로 Promise를 반환하며, .then()으로 그 결과를 받을 수 있음.

https://jerrycodezzz.tistory.com/62

 

await 키워드

• **await**는 async 함수 내에서만 사용 가능한 키워드로, Promise가 해결될 때까지 기다린 후, 그 결과를 반환함.
• 비동기 작업을 마치 동기적으로 처리하는 것처럼 코드를 작성할 수 있게 해줌.

async function fetchData() {
  const data = await new Promise((resolve) =>
    setTimeout(() => resolve("data loaded"), 2000)
  );
  console.log(data); // "data loaded" (2초 후 출력)
}

fetchData();

• await는 Promise가 완료될 때까지 실행을 일시 중지하고, 완료된 후에 data에 결과를 할당함.
• 이처럼 await를 사용하면 비동기 작업을 처리할 때 복잡한 then 체인 없이 동기적인 코드처럼 작성할 수 있음.

 

async/await의 장점

• 가독성 향상: 비동기 작업을 동기적인 방식으로 작성할 수 있어 코드의 가독성이 좋아짐.
• 에러 핸들링이 간편: try-catch 블록을 통해 에러를 쉽게 처리할 수 있음. Promise의 .catch()를 사용하는 것보다 더 직관적임.

async function fetchData() {
  try {
    const data = await new Promise((resolve, reject) =>
      setTimeout(() => reject("Error occurred"), 2000)
    );
    console.log(data);
  } catch (error) {
    console.error(error); // "Error occurred"
  }
}

fetchData();

• try-catch 블록을 사용하여 비동기 코드에서 발생하는 에러를 처리할 수 있음.

 

async/await와 Promise 비교

• Promise는 비동기 작업을 처리하기 위해 .then()과 .catch() 체인으로 연결되며, 다중 비동기 작업의 경우 콜백 지옥과 유사한 구조로 복잡해질 수 있음.
• async/await는 이러한 비동기 흐름을 동기식 코드처럼 작성할 수 있게 해주므로, 코드를 이해하고 유지보수하기 쉽게 만들어줌.

promise :

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("data loaded"), 2000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

 

async / await :

async function fetchData() {
  try {
    const data = await new Promise((resolve) =>
      setTimeout(() => resolve("data loaded"), 2000)
    );
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

 

 

병렬 처리

await는 Promise가 완료될 때까지 기다리는 특성이 있으므로, 여러 비동기 작업을 순차적으로 실행하게 되면 시간이 오래 걸림. 이를 해결하기 위해 **Promise.all()**과 함께 사용하여 비동기 작업을 병렬로 처리할 수 있음.

async function fetchData() {
  const promise1 = new Promise((resolve) => setTimeout(() => resolve("data 1"), 2000));
  const promise2 = new Promise((resolve) => setTimeout(() => resolve("data 2"), 2000));

  const [result1, result2] = await Promise.all([promise1, promise2]);
  console.log(result1, result2); // "data 1" "data 2" (둘 다 동시에 완료됨)
}

fetchData();

 

---

 

• await는 async 함수 내부에서만 사용할 수 있음. 그렇지 않으면 문법 오류가 발생함.
• 에러 처리를 위해 항상 try-catch를 사용하여 에러를 처리하는 것이 좋음.
• 여러 비동기 작업을 동시에 처리할 때는 Promise.all()을 사용하여 성능을 최적화할 수 있음.

---

요약:

• async: 비동기 함수임을 나타내며, 항상 Promise를 반환함.
• await: 비동기 작업이 완료될 때까지 기다린 후 결과를 반환하며, 동기식 코드처럼 작성 가능함.
• 장점: 가독성이 좋고, Promise보다 더 직관적인 비동기 처리 방식.