Promise 사용법 (resolve,reject) &promise.race(),all()

Promise 특징

• Promise는 비동기적인 작업 처리를 위한 도구이다.
• Promise는 then과 catch로 사용할 수 있다.
• Promise를 반환하는 함수 자체는 동기적으로 실행되며, Promise를 반환하는 함수일 경우 비동기적으로 처리된다.
• 비동기적인 작업을 처리할 때, 작업의 성공 유무에 따라 표준화된 방식(then, catch)으로 처리할 수 있게 해주기 때문에 사용한다.
• 네이스팅 방식과 체이닝 방식이 있으며, 일반적으로 체이닝 방식을 사용한다.

 

Promise 만드는 법

<script>
    function job1() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('resolved ok!');
            }, 1000);
        });
    }
    function job2() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('resolved ok 2!');
            }, 1000);
        });
    }
    
    // 네이스팅 방식
    job1().then((data) => {
        console.log('data', data)
        job2().then((data) => {
            console.log('data', data);
        })
    })
    
    // 프라미스 체이닝 방식
    job1().then((data) => {
        console.log('data', data)
        return job2();
    }).then((data2) => {
        console.log('data', data2)
    })

</script>

 

console 결과

 

 

Promise 실패 했을 때 ( reject )

<script>
    function job1() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                // resolve('resolved ok 1!');
                reject('job1 failed!');
            }, 2000);
        });
    }
    function job2() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('resolved ok 2!');
            }, 2000);
        });
    }

    job1()
        .then((data) => {
            console.log('data', data)
            return job2();
        })
        .catch((reason) => {
            console.log('reason', reason)
            return Promise.reject(reason);
        })
        .then((data2) => {
            console.log('data', data2)
        })

</script>

console 결과

 

 

Promise all and race

<script>
    function timer(time) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(time);
            }, time);
        });
    }

    Promise.all([timer(1000), timer(2000), timer(3000)]).then(result => { // 배열에 모든 작업의 결과 값을 반환
        console.log(result);
    })

    Promise.race([timer(1000), timer(2000), timer(3000)]).then(result => { // 제일 빨리 끝난 작업의 결과만 반환
        console.log(result);
    })

</script>