Javascript - Promise all, Promise.race

Promise.all

function sleep(ms){
	return new Promise(resolve => setTimeout(resolve, ms));
}

const getDog = async () => {
	await sleep(1000);
    return '멍멍이';
}

const getRabbit = async () => {
	await sleep(500);
    return '토끼';
}

const getTurtle = async () => {
	await sleep(3000);
    return '거북이';
}

async function process(){
	const dog = await getDog();
    console.log(dog);
    const rabbit = await getRabbit();
    console.log(dog);
    const turtle = await getTurtle();
    console.log(turtle);
}

process();

이렇게 하면 process 함수 안에서 하나씩 함수 호출한다.

 

Promise All 사용하면 한번에 호출할 수 있음

function sleep(ms){
	return new Promise(resolve => setTimeout(resolve, ms));
}

const getDog = async () => {
	await sleep(1000);
    return '멍멍이';
}

const getRabbit = async () => {
	await sleep(500);
    return '토끼';
}

const getTurtle = async () => {
	await sleep(3000);
    return '거북이';
}

async function process(){
	const results = await Promise.all([getDog(), getRabbit(), getTurtle()]);
    console.log(results);
}

process();

이렇게 만들면 배열안의 모든 함수가 다 끝날 대 Promise함수가 끝나게 되고

getTurtle() 이 3초가 걸리기 때문에 실제 걸린 시간은 3초이다

 

결과값은 ['멍멍이', '토끼', '거북이']

 

각 Promise.all 의 배열안의 값들을 꺼내주고 싶을 때

function sleep(ms){
	return new Promise(resolve => setTimeout(resolve, ms));
}

const getDog = async () => {
	await sleep(1000);
    return '멍멍이';
}

const getRabbit = async () => {
	await sleep(500);
    return '토끼';
}

const getTurtle = async () => {
	await sleep(3000);
    return '거북이';
}

async function process(){
	// const results = await Promise.all([getDog(), getRabbit(), getTurtle()]);
    // const dog = results[0]; // 가장 기본적인 방식
    
    // 배열 비구조 할당을 하면 더욱 깔끔함
    const [dog, rabbitm turtle] = await Promise.all([getDog(), getRabbit(), getTurtle()]);
    console.log(dog);
    console.log(rabbit);
    console.log(turtle);
}

process();

Promise.all은 배열안의 하나라도 에러 발생하면 전체 Promise가 에러 발생한 것으로 간주

 

Promise.race

function sleep(ms){
	return new Promise(resolve => setTimeout(resolve, ms));
}

const getDog = async () => {
	await sleep(1000);
    return '멍멍이';
}

const getRabbit = async () => {
	await sleep(500);
    return '토끼';
}

const getTurtle = async () => {
	await sleep(3000);
    return '거북이';
}

async function process(){
    const first = await Promise.race([getDog(), getRabbit(), getTurtle()]);
    console.log(dog);
    console.log(rabbit);
    console.log(turtle);
}

process();

Promise.race는 가장 먼저 끝난 값 하나만 반환한다.

가장 먼저 끝난 것이 에러일 때만 에러로 간주 -> 나머지는 상관없음