84. (Http/axios) 액시오스 사용해 Http 요청 및 응답 데이터 responseType 타입 지정 방법 - json , text , blob , arraybuffer

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : Axios

 

---

[소스 코드]

 

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

- 언어 : JavaScript

- 개발 툴 : Edit ++

- 구분 : 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() {


            // [URL 선언 실시]
            var urlData = "https://jsonplaceholder.typicode.com/posts?userId=1&id=1";


            console.log("");
            console.log("======================================================");
            console.log("[Http] : [request] : [http 요청 수행 실시]");
            console.log("-----------------------------------------");
            console.log("[urlData] : " + urlData);
            console.log("======================================================");
            console.log("");


            // [Http 요청 수행 실시]
            axios({
                method: "GET", // [요청 타입]
                url: urlData, // [요청 주소]
                responseType: 'json', // [JSON 형식으로 응답 데이터 받기] : 종류 = json , text , blob , arraybuffer
                headers: {"Content-Type" : "application/json; charset=UTF-8"}, // [요청 헤더]
                timeout: 5000 // [타임 아웃 시간]
            })
            .then(function(response) {
                console.log("");
                console.log("======================================================");
                console.log("RESPONSE_STATUS : " + response.status);
                console.log("-----------------------------------------");
                console.log("RESPONSE_HEADER : " + response.headers);
                console.log("-----------------------------------------");
                console.log("RESPONSE_DATA : " + response.data); // [Object 형식]
                console.log("======================================================");
                console.log("");


                console.log("");
                console.log("======================================================");
                console.log("PARSE_DATA : " + JSON.stringify(response.data)); // [JSON String 확인]
                console.log("======================================================");
                console.log("");
            })
            .catch(function(error) {
                console.log("");
                console.log("======================================================");
                console.log("ERROR : " + error);
                console.log("======================================================");
                console.log("");
            });

        }; 

        
    </script>

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






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

======================================================
[Http] : [request] : [http 요청 수행 실시]
-----------------------------------------
[urlData] : https://jsonplaceholder.typicode.com/posts?userId=1&id=1
======================================================


======================================================
RESPONSE_STATUS : 200
-----------------------------------------
RESPONSE_HEADER : cache-control: max-age=43200
content-type: application/json; charset=utf-8
expires: -1
pragma: no-cache
-----------------------------------------
RESPONSE_DATA : [object Object]
======================================================


======================================================
WebFunctionTest.html:183 PARSE_DATA : [{"userId":1,"id":1,"title":"sunt aut facere repellat provident occaecati excepturi optio reprehenderit","body":"quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"}]
======================================================

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

---