Promise.all, Promise.race (feat. 동기처리되는 모습, try catch 함께 사용)

1. 동기처리되는 모습

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

    const turtle = await getTurtle();
    console.log(turtle);
}

process();

이렇게 하면 시간이 좀 걸린다. 한꺼번에 처리하는 방법이 있습니다.

 

 

 

 

2. 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 result = await Promise.all([getDog(), getRabbit(), getTurtle()]);
    console.log(result);
}

process();

//출력값
[ '멍멍', '깡총', '느릿' ]

이렇게 되면 Promise.all에 한 배열에 한꺼번에 값이 다 들어가기때문에 순차적인것이 아닌,

한꺼번에 모든 배열값이 출력이 됩니다. 여기서는 3초가 걸립니다. 여기서 재일 오래걸리는게 getTurtle이기 때문입니다.

 

 

 

 

3. Promise.race

등록된 promise중에서 가장빨리 끝나는것을 보여줍니다.

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(first);
}

process();

//출력값
깡총

 

 

 

4. try catch문을 사용해보기 (Promise all & 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() {
    try{
        const result = await Promise.all([getDog(), getRabbit(), getTurtle()]);
    }catch(e){
        console.log(e);
    }
}

process();

Promise.all을 사용할 경우에, 만약 배열안에 들어있는 함수중에 하나라도 애러가 나면 catch문으로 갑니다.

 

 

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() {
    try{
        const first = await Promise.first([getDog(), getRabbit(), getTurtle()]);
    }catch(e){
        console.log(first);
    }
}

process();

이렇게 될 경우에, 가장빨리 처리되는 함수가 애러가 있을경우에 catch문으로 갑니다.