🚀 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가 모두 되야 결과를 리턴 받는다. 배열인자의 각 프로미스 함수들은 제각각 비동기 논블록킹으로 실행되어 시간을 단축 할 수 있다. 리턴값은 각 프로미스 함수의 반환값들이 배열로 담겨져 있다.

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()