투케이2K

573. (javaScript) [간단 소스] 자바스크립트 async () 즉시 실행되는 비동기 함수 사용해 특정 비동기 함수 블럭 내 await 순차적 로직 처리 수행 본문

JavaScript

573. (javaScript) [간단 소스] 자바스크립트 async () 즉시 실행되는 비동기 함수 사용해 특정 비동기 함수 블럭 내 await 순차적 로직 처리 수행

투케이2K 2026. 7. 14. 19:27
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript / async / await


- 사전) 👉 async 와 await 간략 설명 :

  >> async 와 await 는 JavaScript 에서 비동기(Asynchronous) 작업을 동기식 코드처럼 읽기 쉽게 작성하기 위한 문법입니다.

    - 기존의 Promise.then() 체인을 더 직관적으로 사용할 수 있게 해줍니다.

  >> 비동기 (Asynchronous) 수행은 [서버 요청 시작 -> 다음 코드 계속 실행 -> 응답이 오면 처리] 방식으로 동작합니다.

    - 함수 앞에 async를 붙이면 비동기 함수가 됩니다.

  >> await 는 async 함수 내에서 사용할 수 있으며, 요청에 대한 완료를 기다립니다.

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- [반응형 구조 만들기] -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- [Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화] -->
    <meta name="google" content="notranslate">

    

    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- ✅ [스크립트 : CDN 주소 설정] --> 
    <!-- <script src="https://code.jquery.com/jquery-latest.min.js"></script> -->







    <!-- [자바스크립트 코드 지정] -->
    <script type="module">    


    // -----------------------------------------------------------------
    // ✅ [Window.onload 웹 브라우저 로드 완료]
    // -----------------------------------------------------------------
    window.onload = function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

            // ------------------------------------------------
            // 🟦 async  즉시 실행되는 비동기 함수 생성
            // ------------------------------------------------ 
            // 내부에서 await 사용 가능
            // ------------------------------------------------ 
            // ✅ [요청 횟수 및 슬립 대기 시간 정의]
            const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

            const requestSleep = 3000; // 3초 대기 후 재전송

            const requestCnt = 5; // 반복 요청 횟수

            (async () => {

                for (let i = 1; i <= requestCnt; i++) {

                    const num = Math.floor(Math.random() * 6); // 0 이상 6 미만 실수 (typeof Math.floor == number)

                    console.log(`${i} : Request : `, num);

                    // ✅ [다음 요청 대기 후 처리] 
                    if (i < requestCnt) {
                        await sleep(requestSleep);
                    }

                }

            })();

            console.log("async program running");


            // ------------------------------------------------
            // 🟦 출력 되는 로그 예시
            // ------------------------------------------------ 
            /*
            [window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]
            1 : Request :  5
            async program running
            2 : Request :  2
            3 : Request :  4
            4 : Request :  1
            5 : Request :  2
            */
            // ------------------------------------------------ 
           
        }
        catch (exception) {
            console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);
        }

    }; 
      
    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ 102. (Http/fetch) fetch api (페치) 사용해 async await 동기 방식 http 정의 및 커스텀 sleep 지정 및 일정 시간 대기 후 재요청 수행

https://kkh0977.tistory.com/8653

https://blog.naver.com/kkh0977/224198939582


▶️ 68. [IT 기술] 비동기 (async) 및 동기 (sync) 처리 개념 설명

https://kkh0977.tistory.com/2970

https://blog.naver.com/kkh0977/222911927458?trackingCode=blog_bloghome_searchlist


▶️ 20. (axios/액시오스) axios async await 및 promise 사용해 순차적 http 요청 실시

https://kkh0977.tistory.com/2009

https://blog.naver.com/kkh0977/222771039332?trackingCode=blog_bloghome_searchlist


▶️ 14. (ajax/에이젝스) async await 및 promise 사용해 동기식 ajax 요청 실시

https://kkh0977.tistory.com/1192

https://blog.naver.com/kkh0977/222494532343?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

575. (javaScript) [간단 소스] 자바스크립트 BatteryManager 사용해 배터리 충전 상태 및 잔량 정보 확인 - navigator.getBattery  (0) 2026.07.17
574. (javaScript) [간단 소스] 자바스크립트 document.querySelectorAll 사용해 특정 클래스 내에 포함 된 div 내용 검색 수행  (0) 2026.07.15
572. (javaScript) 자바스크립트 Cache Storage 캐시 스토리지 사용해 캐시 생성 및 저장 , 캐시 목록 조회 , 특정 캐시 삭제 실시  (0) 2026.07.14
571. (javaScript) 자바스크립트 브라우저 라이브러리 로드 방법 메모리 캐시 (Memory), 디스크 캐시 (Disk), 네트워크 다운로드 (Network) 설명 정리  (0) 2026.07.13
570. (javaScript) 자바스크립트 window.performance 사용해 resource duration 리소스 (css , js , img 등) 다운로드 시간 확인  (0) 2026.07.09
'JavaScript' Related Articles more
Comments