93. (Http/fetch) fetch (페치) Web APi 요청 시 Request 객체 생성 및 http 전송 수행

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 기술 : fetch

 

---

[소스 코드]

 

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

- 언어 : JavaScript

- 개발 툴 : Edit ++

- 구분 : HTTP / API

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






// --------------------------------------------------------------------------------------
[설명 및 소스 코드]
// --------------------------------------------------------------------------------------

1. Fetch API 는 JavaScript 에서 접근하고 조작할 수 있는 인터페이스를 제공하는 Web Api 입니다.


2. Request 는 Fetch APi 에서 http 요청에 사용할 수 있는 객체입니다.


3. 소스 코드 : 

    <script>

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


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

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


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


            // [Headers 객체 선언 및 헤더 값 추가]
            const myHeaders = new Headers();
            myHeaders.append("Content-Type", "application/json");
            myHeaders.append("Cache-Control", "no-cache");


            // [Object 객체 생성 및 body 값 추가 실시]
            var jsonObject = new Object();
            jsonObject["userId"] = 1;
            jsonObject["id"] = 1;


            // [Request 객체 생성 및 Http 전송 옵션 정의]
            var myRequest = new Request(urlData, {
                method: "POST",
                headers: myHeaders, // [헤더 값 지정]
                body: JSON.stringify(jsonObject), // [Body 값 지정]
                signal: controller.signal // AbortController
            });

            
            // [Fetch 요청 수행 실시]
            fetch(myRequest)
            .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);
                }

                // [json 형식으로 리턴 반환 설정]
                return response.json(); 
            }) 
            .then((data) => {
                console.log("");
                console.log("======================================================");
                console.log("[Http] : [response] : [http 응답 데이터 확인]");
                console.log("-----------------------------------------");
                console.log("response : " + 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] : [response] : [http 응답 데이터 확인]
-----------------------------------------
response : [object Object]
-----------------------------------------
JSON.stringify : {"userId":1,"id":101}
======================================================

// --------------------------------------------------------------------------------------
​

---