366. (javaScript) 자바스크립트 AbortSignal 사용해 DOM 요청 (Fetch , XMLHttpRequest) 취소 처리 수행

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

---

[소스 코드]

 

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web

- 개발 기술 : JavaScript (자바스크립트) / AbortSignal

- 사전 필요 : http 통신 모듈 구현 필요

-----------------------------------------------------------------------------------------





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

    <script>


        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. window.onload : 웹 페이지 로드 완료 시 호출 됩니다 (css , js 로드 완료)
        -----------------------------------------
        2. Fetch API : HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다
        -----------------------------------------
        3. AbortSignal 인터페이스 는 DOM 요청(Fetch와 같은)과 통신하고 필요한 경우 AbortController 객체를 통해 취소할 수 있게 해주는 신호 객체입니다
        -----------------------------------------
        4. 참고 사이트 : https://developer.mozilla.org/ko/docs/Web/API/AbortSignal
        -----------------------------------------
        */



        // [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]
                
            }, 500); // [테스트 에러 발생을 위해 500 밀리세컨드 지정]


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


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


            // [Fetch 요청 수행 실시]
            fetch(urlData, {
                method: "DELETE",
                signal: controller.signal // AbortController
            })
            .then((response) => {
                console.log("");
                console.log("=========================================");
                console.log("[Http] : [response] : [http 응답 코드 및 헤더 확인]");
                console.log("-----------------------------------------");
                console.log("Status Code : " + JSON.stringify(response.status));
                console.log("-----------------------------------------");
                console.log("Cache-Control : " + JSON.stringify(response.headers.get('Cache-Control')));
                console.log("-----------------------------------------");
                console.log("Content-Type : " + JSON.stringify(response.headers.get('Content-Type')));
                console.log("-----------------------------------------");
                console.log("Content-Length : " + JSON.stringify(response.headers.get('Content-Length')));
                console.log("=========================================");
                console.log("");

                // [상태 코드 확인]
                if (!response.ok) {
                    throw new Error("Http Status Error : " + response.status);
                }
                return response.text(); // [text 형식으로 리턴 반환 설정]
            }) 
            .then((data) => {
                console.log("");
                console.log("=========================================");
                console.log("[Http] : [response] : [http 응답 데이터 확인]");
                console.log("-----------------------------------------");
                console.log(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/1
=========================================


=========================================
[Http] : [error] : [http 에러 결과 확인]
-----------------------------------------
[error] : AbortError: signal is aborted without reason
=========================================

-----------------------------------------------------------------------------------------
​

---