[Javascript] async 함수의 병렬 처리

 

 

 

async 함수의 병렬 처리

 

getApple()과 getBanana()라는 비동기 함수가 있고 각 함수들은 1초의 딜레이 후 실행된다고 가정해 보자.

 

아래 예시에서는 await을 두 번 써서 총 2초를 기다리게 되는 것인데 만약 getApple()과 getBanana()라는 함수가 서로 연관성이 없다고 가정하면 이는 결국 시간 낭비인 셈이다.

 

function delay(){
  return new Promise( (resolve, reject) => {
    setTimeout(() => resolve(), 1000);
  })
}

async function getApple(){
  await delay();
  return "apple";
}

async function getBanana(){
  await delay();
  return "banana";
}

async function getFruites(){
  console.time();
  let a = await getApple(); // 1초 소요
  let b = await getBanana(); // 1초 소요
  console.log(`${a} and ${b}`);
  console.timeEnd();
}

getFruites()

 

 

여기서의 핵심은 프로미스(async) 함수를 await과 같이 써서 실행시키는 것이 아니라 미리 함수를 동기(논블록킹)으로 실행하고 그 결과의 프로미스 값을 await을 통해 받는 것이다.

function delay(){
  return new Promise( (resolve, reject) => {
    setTimeout(() => resolve(), 1000);
  })
}

async function getApple(){
  await delay();
  return "apple";
}

async function getBanana(){
  await delay();
  return "banana";
}

async function getFruites(){
  console.time();
  let getApplePromise = getApple(); // async 함수를 미리 논블록킹으로 실행. 
  let getBananaPromise = getBanana(); // async 함수를 미리 논블록킹으로 실행. 
  // 이렇게 하면 백단에서는 독립적으로 거의 동시에 실행됨.
  
  console.log(getApplePromise)
  console.log(getBananaPromise)
  
  let a = await getApplePromise; // 위에서 받은 프로미스 객체의 결과 data를 await을 통해 꺼내는 것. 그 이상 그 이하도 아님.
  let b = await getBananaPromise; 
  
  console.log(`${a} and ${b}`);
  console.timeEnd(); // 본래라면 1초 + 1초를 기다려야 하지만 위에서 1초를 기다리는 함수들을 곧바로 연속으로 비동기로 불려왔기 때문에 대충 1.01초 정도만 기다리면 처리된다.
}

getFruites()

 

 

---

 

Promise.all()

Promise.all()은 배열 인자의 각 프로미스 비동기 함수들이 모두 resolve되어야 결과를 반환 받는다. 배열 인자의 각 프로미스 함수들은 각각 비동기 논블록킹되어 시간을 단축시킬 수 있다. return 값으로는 각 프로미스 함수의 반환 값들이 담겨져 있다.

 

function delay(){
  return new Promise( (resolve, reject) => {
    setTimeout(() => resolve(), 1000);
  })
}

async function getApple(){
  await delay();
  return "apple";
}

async function getBanana(){
  await delay();
  return "banana";
}

async function getFruites(){
  console.time();
  let [ a, b ] = await Promise.all([getApple(), getBanana()]); // 구조 분해로 각 프로미스 리턴값들을 변수에 담는다.
  console.log(`${a} and ${b}`);
  console.timeEnd();
}

getFruites()