[etc] Promise.all 정리

async/await의 용법

var p1 = () =>{ 
    console.log("one 진입");
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve('one'), 3000);
    });
}

var p2 = () =>{ 
    console.log("two 진입");
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve('two'), 1000);
    });
}

var p3 = () =>{ 
    console.log("three 진입");
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve('three'), 7000);
    });
}

var p4 = () =>{ 
    console.log("four 진입");
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve('four'), 1000);
    });
}

var p5 = () =>{ 
    console.log("five 진입");
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve('five'), 3000);
        // reject(new Error('reject'));
    });
}

var execute = async () => {
    console.log(await p1());
    console.log(await p2());
    console.log(await p3());
    console.log(await p4());
    console.log(await p5());

    console.log("All done!!");
}

execute();

결과?

프로미스를 순차적으로 받아낸다.

one 진입
one
two 진입
two
three 진입
three
four 진입
four
five 진입
five
All done!!

근데... 순차적이지 않아도 처리되는 프로세스를 만들고 싶은데?

for await of 를 사용하니

아래와 같은 오류가 나를 반긴다. 흠...

Uncaught SyntaxError: Unexpected reserved word await

뭐야 이런 시밣거... node로 해도 안되고 브라우저에 올려도 안된다.

대안은 Promise.all

mozilla 공식사이트를 참조하자.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

그래 바로 이거임...

여러개의 프로미스를 묶어보자

var p1 = new Promise((resolve, reject) => {
    console.log("one 진입");
    setTimeout(() => { console.log(`one 끝`); return resolve('one') }, 3000);
});
var p2 = new Promise((resolve, reject) => {
    console.log("two 진입");
    setTimeout(() => { console.log(`two 끝`); return resolve('two') }, 1000);
});
var p3 = new Promise((resolve, reject) => {
    console.log("three 진입");
    setTimeout(() => { console.log(`three 끝`); return resolve('three') }, 7000);
});
var p4 = new Promise((resolve, reject) => {
    console.log("four 진입");
    setTimeout(() => { console.log(`four 끝`); return resolve('four') }, 1000);
});
var p5 = new Promise((resolve, reject) => {
    console.log("five 진입");
    setTimeout(() => { console.log(`five 끝`); return resolve('five') }, 3000);
    //reject(new Error('reject'));
});
  
// Using .catch:
Promise.all([p1, p2, p3, p4, p5]).then(values => {
    console.log(values);
}).catch(error => {
    console.error(error.message)
});
  

결과

one 진입
two 진입
three 진입
four 진입
five 진입
two 끝
four 끝
one 끝
five 끝
three 끝
[ 'one', 'two', 'three', 'four', 'five' ]

Promise.all 은 시작순서는 차례로, 모든 작업이 시작한 뒤에 끝난 순서대로 알려주고 모두 끝난 타이밍도 확인 가능하다.

하나라도 실패하면 catch !!

var p1 = new Promise((resolve, reject) => {
    console.log("one 진입");
    setTimeout(() => { console.log(`one 끝`); return resolve('one') }, 3000);
});
var p2 = new Promise((resolve, reject) => {
    console.log("two 진입");
    setTimeout(() => { console.log(`two 끝`); return resolve('two') }, 1000);
});
var p3 = new Promise((resolve, reject) => {
    console.log("three 진입");
    setTimeout(() => { console.log(`three 끝`); return resolve('three') }, 7000);
});
var p4 = new Promise((resolve, reject) => {
    console.log("four 진입");
    setTimeout(() => { console.log(`four 끝`); return resolve('four') }, 1000);
});
var p5 = new Promise((resolve, reject) => {
    console.log("five 에러");
    setTimeout(() => { console.log(`five 끝`); return reject(new Error('reject')); }, 3000);
    //reject(new Error('reject'));
});

// Using .catch:
Promise.all([p1, p2, p3, p4, p5])
.then(values => {
  console.log(values);
})
.catch(error => {
  console.error(error.message)
});

실패 결과는

성공 로그가 아닌 실패 로그가 표시된다.

one 진입
two 진입
three 진입
four 진입
five 에러
two 끝
four 끝
one 끝
five 끝
reject
three 끝  -- 이거 왜나온거지;

원격으로 트랜잭션을 요구하는 작업 등에는 어울리지 않는 기능일듯 한데 어딘가에는 쓸데가 있겠지...
IE를 제외한 나머지 브라우저 구동 OK~