투케이2K

501. (javaScript) [간단 소스] 자바스크립트 async await 사용해 new Promise 순차 대기 sleep 일정 시간 대기 동작 코드 작성 본문

JavaScript

501. (javaScript) [간단 소스] 자바스크립트 async await 사용해 new Promise 순차 대기 sleep 일정 시간 대기 동작 코드 작성

투케이2K 2026. 3. 2. 18:39
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / async / await / new Promise


- 사전) Promise 간편 설명 : 

  >> Promise 는 미래에 완료될 작업의 결과값을 나타내는 객체입니다.

    - 미래에 완료될 작업의 결과(성공/실패) 를 나타내는 객체입니다.

  >> Promise는 3가지 상태를 가집니다 :

    - pending → 대기중

    - fulfilled → 성공 (resolve 호출)

    - rejected → 실패 (reject 호출)


- 사전) async 간편 설명 : 

  >> async 는 함수를 자동으로 Promise로 만들어주는 문법입니다.

  >> async 함수는 항상 Promise를 반환합니다

  >> return 값은 자동으로 resolve 되며, 에러가 발생하면 자동으로 reject 됩니다


- 사전) await 간편 설명 : 

  >> await 는 Promise가 끝날 때까지 기다리는 문법입니다.

  >> await 는 async 함수 안에서만 사용 가능합니다.

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





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

<!DOCTYPE HTML>
<html lang="ko">
<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">


    <!-- 내부 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>

        // --------------------------------------------------------------------------------------------------------------

        // [요청 URL 정의]
        const getUrl = function(idx){
          return `https://dev.test.co.kr/api/${idx}/control`
        }

        // [요청 파람 정의]
        const getParams = function(controlNum){
          return { // JSON
            status: controlNum
          }          
        }

        // ✅ [요청 횟수 및 슬립 대기 시간 정의]
        const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

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

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

        // --------------------------------------------------------------------------------------------------------------

        // [html 최초 로드 및 이벤트 상시 대기 실시]
        window.onload = async function() { // ✅ async 함수 정의
          console.log("");
          console.log("=========================================");
          console.log("[window onload] : [start]");
          console.log("=========================================");
          console.log("");

          try {

            // -------------------------------------
            // 요청 변수      
            // -------------------------------------
            const URL = getUrl(1528);

            // -------------------------------------
            // for await 동기 순차 전송                   
            // -------------------------------------
            console.log("[for] : [start]");

            for (let i = 1; i <= requestCnt; i++) {
              try {
                
                // [요청 body 값 status 는 0 ~ 5 범위 동적 할당]
                const num = Math.floor(Math.random() * 6); // 0 이상 6 미만 실수 (typeof Math.floor == number)

                const param = getParams(num);

                console.log(`${i} : HTTP Request : `, JSON.stringify(param));


                // ✅ [fetch 요청 샘플 구문]
                /*
                const res = await fetch(URL, {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/json',
                    // 필요시 인증
                    // 'Authorization': `Bearer ${YOUR_TOKEN}`,
                  },
                  body: JSON.stringify(param),
                });

                if (!res.ok) {
                  console.error(`${i} : HTTP Error : ${res.status}`);
                }
                else {
                  const data = await res.json().catch(() => null);

                  console.warn(`${i} : HTTP Success : ${res.status} : `, data ?? '(no json)');
                }
                // */


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

              } catch (err) {
                console.error(`for : exception : `, err);
              }
            }

            console.log("[for] : [end]");


            // -------------------------------------
            // for 동작 로그 예시 첨부      
            // -------------------------------------
            /*
            [for] : [start]
            1 : HTTP Request :  {"status":1}
            2 : HTTP Request :  {"status":3}
            3 : HTTP Request :  {"status":1}
            4 : HTTP Request :  {"status":4}
            5 : HTTP Request :  {"status":0}
            [for] : [end]
            */
           // -------------------------------------
            
          }
          catch (exception) {
            console.error("");
            console.error("=========================================");
            console.error("[window onload] : [Exception] : 예외 상황 발생");
            console.error("-----------------------------------------");
            console.error(exception);
            console.error("=========================================");
            console.error("");

          }

        };

        // --------------------------------------------------------------------------------------------------------------

    </script>


</head>


<body>

</body>

</html>

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





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

[fetch (페치) Web API 사용해 async await 동기 방식 http 요청 및 response header 및 body 확인 실시]

https://kkh0977.tistory.com/3514

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


[간단 소스] 자바스크립트 동적 html 코드 작성, new Blob 및 URL.createObjectURL 사용해 window.open 새창 열기

https://kkh0977.tistory.com/8452

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


[자바스크립트 브라우저 사이즈, 해상도 구하기 및 window open 윈도우 창 열기 실시]

https://kkh0977.tistory.com/847

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


[자바스크립트 window open close 사용해 현재 브라우저 창 닫기 수행 - 브라우저 종료]

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


[모바일] 내부 window open 상태 감지 및 새로운 웹뷰 작업 로직 수행 방법

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

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

'JavaScript' 카테고리의 다른 글

503. (javaScript) [간단 소스] 자바스크립트 Web 웹 크롬 브라우저 키이벤트 및 마우스 우클릭 이벤트 감지 개발자 도구 진입 막기 코드  (0) 2026.03.03
502. (javaScript) [간단 소스] 자바스크립트 window.open 사용해 새창 팝업창 열기 후 window.opener.postMessage 메시지 전달 수행  (0) 2026.03.03
500. (javaScript) 자바스크립트 동적 html 코드 및 style 코드 작성 후 window open 동작 테스트  (0) 2026.03.01
499. (javaScript) 자바스크립트 동적 html 코드 작성 및 Script 스크립트 코드 작성 후 window open 동작 테스트  (0) 2026.03.01
498. (javaScript) 자바스크립트 forEach 사용해 태그 공통 스타일 지정 및 p , h1 , div 태그에 json 데이터 pretty 정렬 출력 수행  (0) 2026.03.01
'JavaScript' Related Articles more
Comments