Colin's Blog
자바스크립트 비동기 함수의 동시 실행

자바스크립트는 단일 스레드로 동작하는 언어이기 때문에, 동시에 여러 작업을 처리하기 위해서는 비동기 함수를 사용해야 합니다. 비동기 함수는 작업을 백그라운드에서 처리하고, 작업이 완료되면 콜백 함수를 호출하는 방식으로 동작합니다. 이렇게 비동기 함수를 사용하면 여러 작업을 동시에 실행할 수 있습니다.

Promise와 비동기 함수

Promise는 비동기 작업의 결과를 처리하기 위한 자바스크립트 객체입니다. Promise 객체는 세 가지 상태를 가질 수 있습니다: 대기(pending), 이행(fulfilled), 거부(rejected). 비동기 작업을 수행하는 함수는 Promise 객체를 반환하게 되고, 이행 또는 거부되는 시점에 콜백 함수가 호출됩니다.

아래는 Promise를 사용한 예제 코드입니다:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.5) {
        resolve('Data fetched successfully');
      } else {
        reject('Error occurred while fetching data');
      }
    }, 1000);
  });
}

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

위 코드에서 fetchData() 함수는 Promise 객체를 반환합니다. 해당 Promise 객체는 1초 후에 작업을 완료하고, 성공 시에는 resolve() 함수를 호출하여 데이터를 전달하고, 실패 시에는 reject() 함수를 호출하여 에러 메시지를 전달합니다. 이후에는 then() 메소드를 사용하여 성공 시에 호출될 콜백 함수를 등록하고, catch() 메소드를 사용하여 실패 시에 호출될 콜백 함수를 등록합니다.

비동기 함수의 동시 실행

여러 개의 비동기 작업을 동시에 실행하고, 모든 작업이 완료되면 그 결과를 처리해야할 때는 Promise.all() 함수를 사용할 수 있습니다. Promise.all() 함수는 여러 개의 Promise 객체를 인자로 받아서, 모든 Promise 객체가 이행되거나 하나의 Promise 객체가 거부될 때까지 기다린 후에 결과를 반환합니다.

아래는 Promise.all() 함수를 사용하여 여러 개의 비동기 함수를 동시에 실행하는 예제 코드입니다:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Data fetched from ${url}`);
    }, Math.random() * 2000);
  });
}

function fetchAllData() {
  const urls = ['https://api.example.com/data1', 'https://api.example.com/data2', 'https://api.example.com/data3'];
  const promises = urls.map(url => fetchData(url));
  
  Promise.all(promises)
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error(error);
    });
}

fetchAllData();

위 코드에서 fetchAllData() 함수는 fetchAllData() 함수에서 호출하는 fetchData() 함수를 동시에 실행합니다. fetchData() 함수는 랜덤한 시간 후에 데이터를 반환하는 비동기 작업을 수행합니다. fetchAllData() 함수는 fetchAllData() 함수에서 실행되는 모든 fetchData() 함수의 Promise 객체를 배열로 생성하고, Promise.all() 함수를 이용하여 모든 Promise 객체가 완료될 때까지 기다립니다. 그 후에는 then() 메소드를 사용하여 모든 데이터를 처리하거나, catch() 메소드를 사용하여 실패한 작업을 처리합니다.

결론

자바스크립트 비동기 함수를 사용하여 여러 작업을 동시에 실행할 수 있습니다. Promise를 사용하여 비동기 작업을 관리하고, Promise.all() 함수를 사용하여 여러 개의 비동기 작업을 동시에 실행할 수 있습니다. 비동기 작업을 동시에 실행하여 응답 속도를 향상시키고, 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

© 2018 Colin. All rights reserved.