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

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : axios

 

---

[소스 코드]

​

    <!-- [라이브러리 CDN 등록 실시] -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    




    <!-- [내부 자바스크립트 J쿼리 이벤트 지정] -->    
    <script>


        // [dom 생성 및 이벤트 상시 대기 실시]
        document.addEventListener("DOMContentLoaded", ready);
        function ready(){
            console.log("");
            console.log("[window ready] : [start]");            
            console.log("");
        };





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

            // [http 요청 함수 호출 실시]
            logicFunction();
        };





        // [동기식 함수 정의]
        var httpCount = 1; // [카운트 수행 변수 선언]
        async function logicFunction(){ 
            console.log("");
            console.log("[logicFunction] : [start]"); 
            console.log("");


            // [for 문을 사용해 2번 http 동기 요청 실시]
            for (var i=0; i<2; i++){ 

                // [http 동기식 요청]
                var data = await requestSyncPostBodyJson(httpCount);

                // [카운트 값 증가]
                httpCount ++;
            }

            console.log("");
            console.log("[logicFunction] : [end]"); 
            console.log("");
        };





        // [ajax http 동기 방식 함수 정의]      
        function requestSyncPostBodyJson(countValue){
            return new Promise(function(resolve, reject){ // promise 정의

                // [요청 url 선언]
                var reqURL = "http://jsonplaceholder.typicode.com/posts"; // 요청 주소


                // [요청 json 데이터 선언]
                var jsonData = { // Body에 첨부할 json 데이터
                    "userId" : 1,
                    "id" : 1
                };


                console.log("");
                console.log("[동기식 AJAX] : [countValue] : " + countValue);                
                console.log("[동기식 AJAX] : [request url] : " + reqURL);
                console.log("[동기식 AJAX] : [request data] : " + JSON.stringify(jsonData));
                console.log("");

                axios({
                    // [요청 시작 부분]
                    method: "post", //전송 타입

                    url: reqURL, //주소

                    data: JSON.stringify(jsonData), //전송 데이터

                    headers: {
                        "Content-Type" : "application/json; charset=utf-8"
                    }, //헤더의 Content-Type을 설정

                    timeout: 5000, // [타임 아웃 시간]

                    responseType: "json" // [응답 데이터 : stream , json]
                })
                // [응답 확인 부분 - json 데이터를 받습니다]
                .then(function(response) {                   
                    console.log("");                     
                    console.log("[동기식 AJAX] : [response] : " + JSON.stringify(response));
                    console.log("");


                    // 동기식 요청을 한 함수로 결과 값 반환 실시
                    resolve("{state = T}");
                })
                // [에러 확인 부분]
                .catch(function(error) {
                    console.log("");                      
                    console.log("[동기식 AJAX] : [error] : " + JSON.stringify(error));
                    console.log("");


                    // 동기식 요청을 한 함수로 결과 값 반환 실시
                    reject("{state = F}");
                });
            });                                
        };

    </script>

 

---

[결과 출력]

​

---