101. (Http/axios) 액시오스 사용해 http 요청 및 then , catch , finally 응답 완료 상태 확인

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : Axios

 

---

[소스 코드]

 

// --------------------------------------------------------------------------------------
[개발 및 테스트 환경]
// --------------------------------------------------------------------------------------

- 언어 : JavaScript

- 개발 툴 : Edit ++

- 구분 : HTTP / API

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






// --------------------------------------------------------------------------------------
[사전 설명]
// --------------------------------------------------------------------------------------

1. Axios 란 Vue.js 프레임워크에서 권장하는 HTTP 통신 라이브러리입니다

2. Axios 는 네트워크 통신에서 JSON , XML , HTML , 텍스트 파일 등 다양한 형태의 데이터를 주고받을 수 있습니다

3. Axios 는 Vue.js 프레임워크 환경에서 뿐만 아니라 HTML , JavaScript 환경에서도 사용할 수 있습니다

4. Axios 는 Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양합니다

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






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

    <!-- ================================================== -->
    <!-- [CDN 주소 설정] -->
    <!-- ================================================== -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- ================================================== -->





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

    <script>

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

            // [주소 정의 실시]
            var REQ_URL = "https://jsonplaceholder.typicode.com/posts";


            // [요청 Header 데이터 정의]
            var REQ_HEADERS = new Object();
            REQ_HEADERS["Content-Type"] = "application/json; charset=UTF-8";


            // [요청 Body 데이터 정의]
            var REQ_BODY = new Object();
            REQ_BODY["userId"] = 1;
            REQ_BODY["id"] = 1;


            // [요청 인스턴스 생성]
            const instance = {
                method: "POST", // [요청 타입]
                url: REQ_URL, // [요청 주소]
                data: JSON.stringify(REQ_BODY), // [요청 데이터]
                headers: REQ_HEADERS, // [요청 헤더]
                timeout: 5000 // [타임 아웃 시간]
            };


            // [요청 데이터 확인 실시]
            console.log("");
            console.log("======================================================");
            console.log("REQ_TYPE : " + "POST");
            console.log("-----------------------------------------");
            console.log("REQ_URL : " + REQ_URL);
            console.log("-----------------------------------------");
            console.log("REQ_HEADER : " + JSON.stringify(REQ_HEADERS));
            console.log("-----------------------------------------");
            console.log("REQ_BODY : " + JSON.stringify(REQ_BODY));
            console.log("======================================================");
            console.log("");


            // [axios 요청 수행 실시]
            axios(instance)
            .then(function(response) {
                console.log("");
                console.log("======================================================");
                console.log("RESPONSE_STATUS : " + JSON.stringify(response.status));
                console.log("-----------------------------------------");
                console.log("RESPONSE_HEADER : " + JSON.stringify(response.headers));
                console.log("-----------------------------------------");
                console.log("RESPONSE_DATA : " + JSON.stringify(response.data));
                console.log("======================================================");
                console.log("");
            })
            .catch(function(error) {
                console.log("");
                console.log("======================================================");
                console.log("ERROR : " + error);
                console.log("======================================================");
                console.log("");
            })
            .finally(function () {
                console.log("");
                console.log("======================================================");
                console.log("FINALLY : HTTP END");
                console.log("======================================================");
                console.log("");

                // ------------------------------------
                // [HTTP 요청 완료 상태 정의]
                // ------------------------------------
                // then , catch 이후에 최종 완료 호출 되는 메소드
                // ------------------------------------

            }); 

        }; 

        
    </script>
    
// --------------------------------------------------------------------------------------






// --------------------------------------------------------------------------------------
[결과 출력]
// --------------------------------------------------------------------------------------

======================================================
REQ_TYPE : POST
-----------------------------------------
REQ_URL : https://jsonplaceholder.typicode.com/posts
-----------------------------------------
REQ_HEADER : {"Content-Type":"application/json; charset=UTF-8"}
-----------------------------------------
REQ_BODY : {"userId":1,"id":1}
======================================================


======================================================
RESPONSE_STATUS : 201
-----------------------------------------
RESPONSE_HEADER : {"cache-control":"no-cache","content-length":"30","content-type":"application/json; charset=utf-8","expires":"-1","location":"https://jsonplaceholder.typicode.com/posts/101","pragma":"no-cache"}
-----------------------------------------
RESPONSE_DATA : {"userId":1,"id":101}
======================================================


======================================================
FINALLY : HTTP END
======================================================

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

---