연속되는 Promise 와 연속되는 async await && Promise.all 과 Promise.race

1. 연속되는 Promise

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(ms);
            //reject(new Error('reason'))
        }, ms)
    });
}

p(1000)
    .then(()=>p(1000))
    .then(()=>p(1000))
    .then(()=>{
        console.log('3000ms 후에 실행');
    });

다음소스코드와 같이 체인 형식으로 되어있다.

 

 

 

2. 연속되는 async await

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(ms);
            //reject(new Error('reason'))
        }, ms)
    });
}

(async function main(){
    await p(1000);
    await p(1000);
    await p(1000);
    console.log('3000ms 후에 실행');
})();

 

 

 

3. Promise.all

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(ms);
            //reject(new Error('reason'))
        }, ms)
    });
}


(async function main(){
    const results = await Promise.all([p(1000), p(2000), p(3000)]);
    console.log(results);
})();

p(3000)까지 3초동안 일을 처리하고 한거뻔에 배열로 출력하게 한다.

 

 

 

4. Promise.race

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(ms);
            //reject(new Error('reason'))
        }, ms)
    });
}


(async function main(){
    const result = await Promise.race([p(1000), p(2000), p(3000)]);
    console.log(result);
})();

이것은 배열로 값이 전부다 넘어오는것이 아닌, 가장빨리 처리되는 하나만 result로 반환된다.