Notice
Recent Posts
Recent Comments
Link
투케이2K
79. (Http/XMLHttpRequest) XMLHttpRequest 사용해 HTTP 요청 수행 및 타임아웃 (TimeOut) 설정 , abort 상태 확인 본문
Http & Api
79. (Http/XMLHttpRequest) XMLHttpRequest 사용해 HTTP 요청 수행 및 타임아웃 (TimeOut) 설정 , abort 상태 확인
투케이2K 2024. 11. 14. 20:05[개발 환경 설정]
개발 툴 : Edit++
개발 기술 : fetch
[소스 코드]
// --------------------------------------------------------------------------------------
[개발 및 테스트 환경]
// --------------------------------------------------------------------------------------
- 언어 : JavaScript
- 개발 툴 : Edit ++
- 구분 : HTTP / API
// --------------------------------------------------------------------------------------
// --------------------------------------------------------------------------------------
[소스 코드]
// --------------------------------------------------------------------------------------
<!-- ===================================================================================================== -->
<!-- [자바스크립트 코드 지정] -->
<!-- ===================================================================================================== -->
<script>
/*
-----------------------------------------
[요약 설명]
-----------------------------------------
1. window.onload : 웹 페이지 로드 완료 시 호출 됩니다 (css , js 로드 완료)
-----------------------------------------
2. 참고 사이트 : https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/timeout
-----------------------------------------
*/
// [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?userId=1&id=1";
// [요청 데이터 확인 실시]
console.log("");
console.log("======================================================");
console.log("REQ_TYPE : " + "GET");
console.log("-----------------------------------------");
console.log("REQ_URL : " + REQ_URL);
console.log("======================================================");
console.log("");
// [HTTP 요청 수행 실시]
var xhr = new XMLHttpRequest();
xhr.open("GET", REQ_URL, true); // [전송 타입]
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); // [전송 헤더]
xhr.onreadystatechange = function() { // [응답 콜백 확인]
// [complete 완료 상태 인 경우]
if (xhr.readyState == 4) {
// [응답 상태 코드 확인 실시]
if (xhr.status == 200 || xhr.status == 201){
console.log("");
console.log("======================================================");
console.log("RES_STATUS : " + xhr.status);
console.log("-----------------------------------------");
console.log("RES_DATA : " + xhr.responseText);
console.log("======================================================");
console.log("");
}
else {
console.log("");
console.log("======================================================");
console.log("ERROR_STATUS : " + xhr.status);
console.log("-----------------------------------------");
console.log("ERROR_DATA : " + xhr.responseText);
console.log("======================================================");
console.log("");
}
}
};
xhr.onabort = function() {
console.log("");
console.log("======================================================");
console.log("ERROR_ABORT : " + xhr.abort);
console.log("======================================================");
console.log("");
};
xhr.send(null); // [HTTP 전송 수행]
setTimeout(() => { xhr.abort() } , 1000); // [밀리 세컨드 단위 타임 아웃 값 지정] : 타임아웃 발생 시 xhr.onabort 호출 됨
};
</script>
// --------------------------------------------------------------------------------------
// --------------------------------------------------------------------------------------
[결과 출력]
// --------------------------------------------------------------------------------------
======================================================
REQ_TYPE : GET
-----------------------------------------
REQ_URL : https://jsonplaceholder.typicode.com/posts?userId=1&id=1
======================================================
======================================================
ERROR_STATUS : 0
-----------------------------------------
ERROR_DATA :
======================================================
======================================================
ERROR_ABORT : function abort() { [native code] }
======================================================
// --------------------------------------------------------------------------------------
반응형
'Http & Api' 카테고리의 다른 글
Comments