JS 2-4. 비동기 함수 병렬 호출

11. 여러 비동기 함수를 동시에 병렬로 호출하는 방법?

여러 비동기 함수를 동시에 병렬로 호출하려면, JavaScript에서는 Promise.all 또는 Promise.allSettled 같은 기능을 사용할 수 있다. 이들은 비동기 작업들을 병렬로 실행하고, 모든 작업이 완료될 때까지 기다린다.

---

1. Promise.all

Promise.all은 모든 비동기 함수가 성공적으로 완료되면 결과를 반환.
하나라도 실패하면 실패한 이유를 반환한다.

🖥️ javascript

async function fetchData1() {
  return new Promise((resolve) => setTimeout(() => resolve("Data 1"), 1000));
}

async function fetchData2() {
  return new Promise((resolve) => setTimeout(() => resolve("Data 2"), 2000));
}

async function fetchData3() {
  return new Promise((resolve) => setTimeout(() => resolve("Data 3"), 1500));
}

async function fetchAllData() {
  try {
    const results = await Promise.all([fetchData1(), fetchData2(), fetchData3()]);
    console.log(results); // ["Data 1", "Data 2", "Data 3"]
  } catch (error) {
    console.error("One of the promises failed:", error);
  }
}

fetchAllData();

2. Promise.allSettled

Promise.allSettled은 모든 비동기 작업이 완료될 때까지 기다리며,
성공 여부에 관계없이 각 작업의 결과나 오류를 반환한다.

🖥️ javascript

async function fetchData1() {
  return new Promise((resolve) => setTimeout(() => resolve("Data 1"), 1000));
}

async function fetchData2() {
  return new Promise((_, reject) => setTimeout(() => reject("Error in Data 2"), 2000));
}

async function fetchData3() {
  return new Promise((resolve) => setTimeout(() => resolve("Data 3"), 1500));
}

async function fetchAllData() {
  const results = await Promise.allSettled([fetchData1(), fetchData2(), fetchData3()]);
  results.forEach((result, index) => {
    if (result.status === "fulfilled") {
      console.log(`Promise ${index + 1} resolved:`, result.value);
    } else {
      console.log(`Promise ${index + 1} rejected:`, result.reason);
    }
  });
}

fetchAllData();

3. Promise.race

Promise.race는 가장 빨리 완료된 Promise의 결과를 반환한다.

🖥️ javascript

async function fetchData1() {
  return new Promise((resolve) => setTimeout(() => resolve("Data 1"), 1000));
}

async function fetchData2() {
  return new Promise((_, reject) => setTimeout(() => reject("Error in Data 2"), 2000));
}

async function fetchData3() {
  return new Promise((resolve) => setTimeout(() => resolve("Data 3"), 1500));
}

async function fetchFirstData() {
  try {
    const result = await Promise.race([fetchData1(), fetchData2(), fetchData3()]);
    console.log("First completed:", result);
  } catch (error) {
    console.error("First failed:", error);
  }
}

fetchFirstData();

병렬 호출이 필요한 이유

비동기 함수들은 기본적으로 호출 시 실행이 시작되기 때문에,
별도로 병렬 처리를 위해 Promise 객체를 조작하지 않아도 된다. 그러나 병렬 실행의 결과를 수집하거나, 모든 작업이 완료되기를 기다려야 할 경우에는 Promise.all 또는 유사한 패턴을 활용해야 한다.

➡️

• Promise.all : 모든 작업이 성공적으로 완료될 때 결과를 사용하는 경우.
• Promise.allSettled : 실패한 작업을 포함한 모든 결과를 확인하는 경우.
• Promise.race : 가장 빨리 완료된 작업의 결과만 필요할 때.