85. (Http/fetch) fetch (페치) Http 요청 및 응답 데이터 responseType 타입 지정 - json , text , blob , arraybuffer

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : fetch

 

---

[소스 코드]

 

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

- 언어 : JavaScript

- 개발 툴 : Edit ++

- 구분 : HTTP / API

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






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

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


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

            // [AbortController 사용해 Fetch 요청 타임 아웃 지정]
            const controller = new AbortController();
            const timeoutId = setTimeout(() => {

                controller.abort(); // [Fetch >> catch 부분] : [AbortError: signal is aborted without reason]
                
            }, 5000); // [5000 밀리세컨드]


            // [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("");


            // [Fetch 요청 수행 실시]
            fetch(urlData, {
                method: "GET",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
                },
                cache: 'no-cache',
                signal: controller.signal // AbortController
            })
            .then((response) => {
                console.log("");
                console.log("======================================================");
                console.log("[Http] : [response] : [http 응답 코드 및 헤더 확인]");
                console.log("-----------------------------------------");
                console.log("Status Code : " + response.status);
                console.log("-----------------------------------------");
                console.log("Cache-Control : " + response.headers.get('Cache-Control'));
                console.log("-----------------------------------------");
                console.log("Content-Type : " + response.headers.get('Content-Type'));
                console.log("======================================================");
                console.log("");

                // [상태 코드 확인]
                if (!response.ok) {
                    throw new Error("Http Status Error : " + response.status);
                }

                /*
                -----------------------------------------
                [response type 종류]
                -----------------------------------------
                1. response.text() : text 형식으로 리턴 반환
                -----------------------------------------
                2. response.json() : json 형식으로 리턴 반환
                -----------------------------------------
                3. response.formData() : FormData 객체 형태로 반환
                -----------------------------------------
                4. response.blob() : Blob(타입이 있는 바이너리 데이터) 형태로 반환
                -----------------------------------------
                5. response.arrayBuffer() : ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환
                -----------------------------------------
                */

                return response.json(); // [json 형식으로 리턴 반환 설정]
            }) 
            .then((data) => {
                console.log("");
                console.log("======================================================");
                console.log("[Http] : [response] : [http 응답 데이터 확인]");
                console.log("-----------------------------------------");
                console.log("origin : " + data);
                console.log("-----------------------------------------");
                console.log("JSON.stringify : " + JSON.stringify(data));
                console.log("======================================================");
                console.log("");
            })
            .catch((error) => {
                console.log("");
                console.log("======================================================");
                console.log("[Http] : [error] : [http 에러 결과 확인]");
                console.log("-----------------------------------------");
                console.log("[error] : " + error);
                console.log("======================================================");
                console.log(""); 
            });

        }; 

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






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

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


======================================================
[Http] : [response] : [http 응답 코드 및 헤더 확인]
-----------------------------------------
Status Code : 200
-----------------------------------------
Cache-Control : max-age=43200
-----------------------------------------
Content-Type : application/json; charset=utf-8
======================================================


======================================================
[Http] : [response] : [http 응답 데이터 확인]
-----------------------------------------
origin : [object Object]
-----------------------------------------
JSON.stringify : [{"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"}]
======================================================

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

---