마카로닉스

2021 No

Promise, 와 async_await 예 ★

2023-02-07 18:55:13 By 라이트 0 1477 댓글수 4 삭제 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Promise ~ then

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button onclick="
        // Promise로 비동기 함수를 순서대로 실행
        fnProductReady(1, 2000)
            .then((pResult1) => {
                console.log(pResult1);
                return fnProductReady(2, 1000);
            })
            .then((pResult2) => {
                console.log(pResult2);
                return fnProductReady(3, 500);
            })
            .then((pResult3) => console.log(pResult3));
    ">Promise : 상품 배송시작!</button>

    <script>
        // Promise로 비동기 함수 생성
        function fnProductReady(pNum, pTime) {
            return new Promise((fnResolve) => {
                setTimeout(() => {
                    console.log(pNum);
                    fnResolve('상품이 성공적으로 배송되었습니다.');
                }, pTime);
            });
        }
    </script>
</body>
</html>

promise ~ async ~ await

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- async의 함수를 실행 -->
    <button onclick="fnDoAsyncFunc();">async, await : 상품 배송 시작!</button>

    <script>
        // await으로 비동기 함수를 순서대로 실행. 
        // Promise보다 소스가 간결하고 가독성이 가장 높음! 
        async function fnDoAsyncFunc() {
            console.log(await fnProductReady(1, 2000)); // 2초 지연
            console.log(await fnProductReady(2, 1000)); // 1초 지연
            console.log(await fnProductReady(3, 500)); // 0.5초 지연
        }        
        // Promise로 비동기 함수 생성
        function fnProductReady(pNum, pTime) {
            return new Promise((resolve) => {
                setTimeout(() => {
                    console.log(pNum);
                    resolve('상품이 성공적으로 배송되었습니다.');
                }, pTime); // 타이머로 가상의 네트워크 지연상황 연출함
            });
        }
    </script>
</body>
</html>