Notice
Recent Posts
Recent Comments
Link
투케이2K
77. (Http/fetch) fetch (페치) Web API 사용해 http delete 방식 요청 수행 및 응답 확인 본문
Http & Api
77. (Http/fetch) fetch (페치) Web API 사용해 http delete 방식 요청 수행 및 응답 확인
투케이2K 2024. 11. 12. 20:23[개발 환경 설정]
개발 툴 : Edit++
개발 기술 : fetch
[소스 코드]
<!-- ===================================================================================================== -->
<!-- [자바스크립트 코드 지정] -->
<!-- ===================================================================================================== -->
<script>
/*
-----------------------------------------
[요약 설명]
-----------------------------------------
1. window.onload : 웹 페이지 로드 완료 시 호출 됩니다 (css , js 로드 완료)
-----------------------------------------
2. Fetch API : HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다
-----------------------------------------
3. 참고 사이트 : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
-----------------------------------------
*/
// [html 최초 로드 및 이벤트 상시 대기 실시]
window.onload = function() {
console.log("");
console.log("======================================================");
console.log("[WebFile] : [window onload] : [start]");
console.log("======================================================");
console.log("");
// [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"
})
.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] : [response] : [http 응답 코드 및 헤더 확인]
-----------------------------------------
Status Code : 200
-----------------------------------------
Cache-Control : "no-cache"
-----------------------------------------
Content-Type : "application/json; charset=utf-8"
-----------------------------------------
Content-Length : "2"
=========================================
=========================================
[Http] : [response] : [http 응답 데이터 확인]
-----------------------------------------
"{}"
=========================================
반응형
'Http & Api' 카테고리의 다른 글
Comments