...
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()
인용한 부분에 있어 만일 누락된 출처가 있다면 반드시 알려주시면 감사하겠습니다
이 글이 좋으셨다면 구독 & 좋아요
여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.