[JavaScript] async & await

🚀 async / await 정리

async / await는 비동기 작업을 쉽게 처리할 수 있도록 도와주는 최신 JavaScript 문법입니다.
이를 사용하면 코드를 동기 방식처럼 읽기 쉽게 만들 수 있고, 콜백 지옥을 방지할 수 있습니다. 😊

---

📌 async 키워드

• async 키워드가 붙은 함수는 항상 Promise를 반환합니다.
• 반환값이 Promise가 아닐 경우, 자동으로 Promise.resolve(반환값)으로 감싸서 반환됩니다.

✅ 예제: async 함수는 Promise를 반환한다

async function get1() {
  return '1'; // 자동으로 Promise.resolve('1')로 변환됨
}

// 실행
const one = get1();
one.then((num) => console.log(num)); // 출력: 1

✔ get1()은 Promise를 반환하는 함수로 변환됩니다.
✔ .then()을 사용하여 값을 받아올 수 있습니다.

---

📌 await 키워드

• await 키워드는 비동기 함수(async 함수) 내부에서만 사용 가능합니다.
• await을 사용하면 해당 Promise가 완료될 때까지 기다린 후 다음 코드가 실행됩니다.

✅ 예제: await으로 비동기 작업을 순차 실행

function network() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('📡 데이터 요청 중...');
      resolve('✅ 데이터 받아옴');
    }, 2000);
  });
}

async function getData() {
  console.log('🌍 네트워크 요청 시작');
  
  // network() 함수의 결과를 기다림
  const result1 = await network();
  console.log(result1); // ✅ 데이터 받아옴

  const result2 = await network();
  console.log(result2); // ✅ 데이터 받아옴

  console.log('🚀 모든 네트워크 요청 완료!');
}

getData();

✔ await network();가 실행될 때 2초 동안 기다린 후 다음 코드 실행
✔ await을 사용하면 콜백 없이도 비동기 코드의 흐름을 순차적으로 표현 가능

---

📌 async / await 에러 처리

비동기 작업에서 예외(error)가 발생할 경우, try/catch 구문을 사용하여 안전하게 처리할 수 있습니다.

✅ 예제: try / catch로 에러 처리

function networkWithError() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('❌ 네트워크 오류 발생'));
    }, 2000);
  });
}

async function fetchData() {
  try {
    console.log('🌍 네트워크 요청 시작');
    const data = await networkWithError(); // 실패 시 catch 블록으로 이동
    console.log(`✅ 데이터: ${data}`);
  } catch (err) {
    console.error(err.message); // ❌ 네트워크 오류 발생
  } finally {
    console.log('🎯 작업 완료 (성공/실패 관계없이 실행)');
  }
}

fetchData();

✔ try 블록에서 await을 사용하여 네트워크 요청 실행
✔ reject가 발생하면 즉시 catch 블록으로 이동하여 에러 처리
✔ **finally**는 성공/실패 여부와 상관없이 마지막에 항상 실행됨

---

📌 await의 중요성

• await을 사용하지 않으면 비동기 코드가 순서대로 실행되지 않고 먼저 실행될 수도 있음
• await을 사용하면 비동기 작업이 완료된 후 다음 코드가 실행됨

❌ await 없이 실행할 경우

async function getDataWithoutAwait() {
  console.log('🌍 네트워크 요청 시작');

  const result = network(); // `await` 없음 (비동기 실행)
  console.log(result); // Promise 객체가 출력됨

  console.log('🚀 네트워크 요청 완료! (데이터가 오기 전에 실행)');
}

getDataWithoutAwait();

🔹 출력 결과:

plaintext

복사

🌍 네트워크 요청 시작 🚀 네트워크 요청 완료! (데이터가 오기 전에 실행) Promise { <pending> }

✔ await이 없어서 네트워크 요청이 완료되기 전에 다음 코드가 실행됨

---

📌 async / await vs Promise.then()

비교항목	async / await	Promise.then()
			가독성	동기 코드처럼 읽기 쉬움 ✅	콜백이 많아지면 복잡해짐 ❌
에러 처리	try / catch로 간단하게 처리 ✅	.catch()를 따로 추가해야 함 ❌
체이닝	직관적 ✅	.then().then() 방식으로 이어짐 ❌
병렬 실행	Promise.all() 필요 ❌	원래 병렬 실행 가능 ✅

✅ Promise.then() 방식

network()
  .then((data) => {
    console.log(data);
    return network();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((err) => console.error(err));

✅ async / await 방식

async function fetchData() {
  try {
    const data1 = await network();
    console.log(data1);

    const data2 = await network();
    console.log(data2);
  } catch (err) {
    console.error(err);
  }
}

fetchData();

✔ async / await을 사용하면 코드가 동기 방식처럼 자연스럽게 읽힘
✔ Promise.then()보다 에러 처리가 직관적

---

📌 Promise.all()을 활용한 병렬 실행

👉 await을 여러 번 사용하면 작업이 순차적으로 실행되므로 속도가 느려질 수 있음
👉 여러 비동기 작업을 동시에 실행하려면 Promise.all()을 사용해야 함

✅ 순차 실행 (비효율적)

async function fetchSequential() {
  const data1 = await network();
  console.log(data1);

  const data2 = await network();
  console.log(data2);
}

fetchSequential();

 

✔ network()가 끝난 후 다음 작업이 시작됨 (총 4초 소요)

✅ 병렬 실행 (효율적)

async function fetchParallel() {
  const [data1, data2] = await Promise.all([network(), network()]);
  console.log(data1, data2);
}

fetchParallel();

✔ Promise.all()을 사용하면 모든 작업이 동시에 실행되어 더 빠르게 완료됨 🚀

---

📌 정리

• async → 함수가 Promise를 반환하도록 변환
• await → Promise가 완료될 때까지 기다렸다가 다음 코드 실행
• try / catch → async / await에서 에러를 처리하는 방법
• finally → 성공/실패와 관계없이 마지막에 실행
• Promise.all() → 여러 개의 비동기 작업을 병렬 실행하여 속도 향상

---

📢 async / await을 사용하면 비동기 코드를 동기 코드처럼 쉽게 작성할 수 있습니다! 🚀

---

// promise를 감싸서 보기 쉽게 만들어준다.

// Async: 비동기 함수를 정의하는 키워드
// async -> promise를 반환하는 비동기 함수로 변환
async function get1() {
  return '1';
}
// async 키워드가 붙으면 항상 promise로 리턴
const one = get1();
one.then((num) => console.log(num));
// async 함수 안에서 promise를 리턴하면 promise로 감싸지 않는다.

function network() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('data');
      resolve('data resolve');
    }, 2000);
  });
}
async function getData() {
  // await은 async 함수 내부에서만 실행이 가능하다.
  // await이 없다면 비동기적으로 console.log('dataReturn') 값이 먼저 표시된다.
  // 순차적으로 실행할 수 있다.
  await network();
  await network();
  // async 내부에서 에러처리
  try {
    const net = await network();
  } catch (err) {
    console.log(err);
    // 에러 시 대신 넣을 값을 리턴
    net = 'data reject';
  }
  return console.log(`return ${net}`);
}