[Javascript] New Javascript 8장 async/await

✅ 1. async/await

자바스크립트는 단일 스래드 언어로 오래 걸리는 작업을 동기적으로 처리할 시 화면이 멈추는 현상이 발생합니다. 이를 해결하기 위해 비동기 프로그래밍을 사용해야하는 데, 그 작업 중 하나가 바로 async/await입니다.

---

✅ 2.async/await에 관하여

async/await는 각 특징을 가지고 있습니다. 먼저 async 함수는 항상 Promise를 반환한다는 특징과 await는 Promise가 끝날 때까지를 기다린 후 결과를 반환하는 역할을 담당하고 있습니다. 동기 코드처럼 직관적으로 작성이 가능합니다.

// async/await  함수는 항상 Promise를 반환
async function fetchData() {
  // await는 Promise가 처리될 따까지 대기
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data Load!"), 3000); // 3초후 로드
  });
  console.log(result);
}

fetchData();

• async가 붙은 함수는 Promise를 반환
• await는 Promise가 처리될 때까지 대기 
• setTimeout은 비동기를 동작하는 시뮬레이션

---

✅ 3. async/await와 에러처리

async/await에서 에러를 처리하기 위한 방법도 있습니다. 바로 try/catch문을 사용해 에러를 처리할 수 있습니다.

async function fetchDataError() {
  try {
    const result = await new Promise((resolve, reject) => {
      const suceess = Math.random() > 0.5; // Math.random() = 난수
      setTimeout(() => {
        if (suceess) resolve("Success");
        else reject("Failed!");
      }, 1000);
    });
    console.log(result);
  } catch (error) {
    console.error("Error: ", error);
  }
}

fetchDataError();

• try/catch를 사용하면 await에 발생한 Promise reject를 잡을 수 있음
• Math.ramdom()을 사용한 랜덤 성공/실패 시뮬레이션
• 실행 시 랜덤으로 성공과 실패가 반환됨

---

✅ 4. 여러 비동기 작업 순차 처리

여러 개의 비동기 작업을 수행해서 각각 순서대로 실행할 수 있습니다.

async function sequentialTasks() {
  const task1 = await new Promise((res) =>
    setTimeout(() => res("Work1 Completed!"), 1000)
  );
  console.log(task1);

  const task2 = await new Promise((res) =>
    setTimeout(() => res("Work2 Completed!"), 1000)
  );
  console.log(task2);

  const task3 = await new Promise((res) =>
    setTimeout(() => res("Work3 Completed!"), 1000)
  );
  console.log(task3);
}

sequentialTasks();

• await를 사용해 순서대로 실행됨
• 실행 시간:
  • Work1: 1초
  • Work2: 0.5초
  • Work3: 0.2초
    • 총 1.7초 소요

---

✅ 5. 여러 비동기 작업 병렬 처리

// 여러 작업 비동기 처리
async function parallelTasks() {
  const promise1 = new Promise((res) =>
    setTimeout(() => res("Work1 Completed!", 1000))
  );
  const promise2 = new Promise((res) =>
    setTimeout(() => res("Work2 Completed!", 500))
  );
  const promise3 = new Promise((res) =>
    setTimeout(() => res("Work3 Completed!", 200))
  );

  const result = await Promise.all([promise1, promise2, promise3]);
  console.log(result); // ["Work1 Completed!", "Work2 Completed", "Work3 Completed"]
}

parallelTasks();

• Promise.all로 병렬 실행
• 가장 오래 걸리는 Promise가 끝날 때까지 기다리고 모든 결과 반환
• 순차 실행과 달리 총 1초 정도밖에 안걸림

---

✅ 6. 실제 API 호출 예제(fetch)

async function getUser() {
  try {
    const resolve = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await resolve.json();
    console.log(data);
  } catch (error) {
    console.error("API Load Failed", error);
  }
}

getUser();

• fetch는 기본적으로 Promise를 반환
• await fetch(...)로 요청 완료를 기다림
• await response.json()을 사용해 JSON 변환 완료를 기다림
• 에러 발생 시 catch에서 처리

---

 

 

GitHub - javascript-only/newJSRoom: https://thinky.tistory.com/category/Front-End/JavaScript