이 코드에서는 getApple() 함수와 getBanana() 함수가 각각 비동기 함수로, delay() 함수로 인해 1초의 대기 시간이 있음
하지만 getFruites() 함수에서 두 비동기 함수를 순차적으로 실행(await getApple(), await getBanana())하므로, 총 2초의 대기 시간이 발생함.
두 함수가 서로 연관이 없으므로 순차적으로 실행할 필요가 없는데, 이 방식은 비효율적.
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();
이 코드에서는 getApple()이 완료된 후 getBanana()가 실행되므로 총 2초가 걸림
2. 최적화된 코드
이 코드에서는 getApple()과 getBanana()를 각각 논블로킹 방식으로 먼저 실행함.
즉, await 키워드를 사용하지 않고, 프로미스를 미리 실행시켜 두 함수를 거의 동시에 비동기로 실행시킴
두 함수가 동시에 실행되므로 대기 시간이 약 1초로 줄어듦
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(); // 비동기로 미리 실행
let getBananaPromise = getBanana(); // 비동기로 미리 실행
let a = await getApplePromise; // 프로미스 결과 대기
let b = await getBananaPromise;
console.log(`${a} and ${b}`);
console.timeEnd(); // 총 1초 대기
}
getFruites();
3. Promise.all()을 사용한 최적화
Promise.all()은 여러 비동기 작업을 동시에 실행하고, 모든 프로미스가 완료될 때까지 기다렸다가 그 결과를 반환함
여러 비동기 작업을 병렬로 처리하므로, 대기 시간을 더욱 최적화할 수 있음
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(); // 총 1초 대기
}
getFruites();
Promise.all()을 사용하면 getApple()과 getBanana()가 병렬로 실행되며, 두 함수가 모두 완료된 후 결과를 배열로 반환합니다.