2021년 4월 15일 목요일

promise.all(), promise.any(), promise.race(), promise.allsettled() 차이 설명 쉬운 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        
        const prom1 = new Promise((resolvereject=> {
            setTimeout(() => {
                // resolve('first promise resolved')
                reject('first promise rejected')
            }, Math.floor(Math.random() * 1000));
        });

        const prom2 = new Promise((resolvereject=> {
            setTimeout(() => {
                resolve('second promise resolved')
                // reject('second promise rejected')
            }, Math.floor(Math.random() * 1000));
        });

        const prom3 = new Promise((resolvereject=> {
            setTimeout(() => {
                // resolve('third promise resolved')
                reject('third promise rejected')
            }, Math.floor(Math.random() * 1000));
        });

        // Promise.all()
        // 첫 번째 거부 된 Promise로 오류를 던진다...
        (async function() {
            try {
                const result = await Promise.all([prom1prom2prom3]);
                console.log(result);
            } catch (err) {
                console.log(err)
            }
        })();

        // Promise.race()
        // 새로고침을 계속하면 3개중 하나의 결과만 리턴해준다.
        // reject든 resolve든 간에...
        (async function() {
            try {
                const result = await Promise.race([prom1prom2prom3]);
                console.log(result);
            } catch (err) {
                console.log(err)
            }
        })();
        
        // Promise.any()
        // Promise.race() 는 reject되도 상관없지만 any() 는 resolve된것만 리턴. 새로고침하며 결과 확인
        // Promise 중 하나가 reject 되더라도 다른 Promise를 계속 해결할 것.
        // 모든 Promise가 reject된 경우에만 집계 오류가 발생
        (async function() {
            const result = await Promise.any([prom1prom2prom3]);
            console.log(result); // Prints “A”, “B” or “C”
        })();

        // Promise.allSettled()
        // 모든 Promise가 resolve되거나 reject된 후에 각 Promise의 결과를 설명하는 다양한 개체와 함께 해결하는 Promise를 return
        (async function() {
            try {
                const result = await Promise.allSettled([prom1prom2prom3]);
                console.log(result);
            } catch (err) {
                console.log(err)
            }
        })();
    </script>
</body>
</html>

댓글 없음:

댓글 쓰기