Notice
Recent Posts
Recent Comments
Link
투케이2K
100. (Http/axios) 액시오스 사용해 http 요청 시 Object 오브젝트 사용 header , body 데이터 추가 및 인스턴스 생성 전송 본문
Http & Api
100. (Http/axios) 액시오스 사용해 http 요청 시 Object 오브젝트 사용 header , body 데이터 추가 및 인스턴스 생성 전송
투케이2K 2024. 12. 21. 08:51[개발 환경 설정]
개발 툴 : Edit++
개발 기술 : Axios
[소스 코드]
// --------------------------------------------------------------------------------------
[개발 및 테스트 환경]
// --------------------------------------------------------------------------------------
- 언어 : JavaScript
- 개발 툴 : Edit ++
- 구분 : HTTP / API
// --------------------------------------------------------------------------------------
// --------------------------------------------------------------------------------------
[사전 설명]
// --------------------------------------------------------------------------------------
1. Axios 란 Vue.js 프레임워크에서 권장하는 HTTP 통신 라이브러리입니다
2. Axios 는 네트워크 통신에서 JSON , XML , HTML , 텍스트 파일 등 다양한 형태의 데이터를 주고받을 수 있습니다
3. Axios 는 Vue.js 프레임워크 환경에서 뿐만 아니라 HTML , JavaScript 환경에서도 사용할 수 있습니다
4. Axios 는 Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양합니다
// --------------------------------------------------------------------------------------
// --------------------------------------------------------------------------------------
[소스 코드]
// --------------------------------------------------------------------------------------
<!-- ================================================== -->
<!-- [CDN 주소 설정] -->
<!-- ================================================== -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- ================================================== -->
<!-- ================================================== -->
<!-- [자바스크립트 코드 지정] -->
<!-- ================================================== -->
<script>
// [html 최초 로드 및 이벤트 상시 대기 실시]
window.onload = function() {
console.log("");
console.log("======================================================");
console.log("[window onload] : [start] : " + new Date().getTime());
console.log("======================================================");
console.log("");
// [주소 정의 실시]
var REQ_URL = "https://jsonplaceholder.typicode.com/posts";
// [요청 Header 데이터 정의]
var REQ_HEADERS = new Object();
REQ_HEADERS["Content-Type"] = "application/json; charset=UTF-8";
// [요청 Body 데이터 정의]
var REQ_BODY = new Object();
REQ_BODY["userId"] = 1;
REQ_BODY["id"] = 1;
// [요청 인스턴스 생성]
const instance = {
method: "POST", // [요청 타입]
url: REQ_URL, // [요청 주소]
data: JSON.stringify(REQ_BODY), // [요청 데이터]
headers: REQ_HEADERS, // [요청 헤더]
timeout: 5000 // [타임 아웃 시간]
};
// [요청 데이터 확인 실시]
console.log("");
console.log("======================================================");
console.log("REQ_TYPE : " + "POST");
console.log("-----------------------------------------");
console.log("REQ_URL : " + REQ_URL);
console.log("-----------------------------------------");
console.log("REQ_HEADER : " + JSON.stringify(REQ_HEADERS));
console.log("-----------------------------------------");
console.log("REQ_BODY : " + JSON.stringify(REQ_BODY));
console.log("======================================================");
console.log("");
// [axios 요청 수행 실시]
axios(instance)
.then(function(response) {
console.log("");
console.log("======================================================");
console.log("RESPONSE_STATUS : " + JSON.stringify(response.status));
console.log("-----------------------------------------");
console.log("RESPONSE_HEADER : " + JSON.stringify(response.headers));
console.log("-----------------------------------------");
console.log("RESPONSE_DATA : " + JSON.stringify(response.data));
console.log("======================================================");
console.log("");
})
.catch(function(error) {
console.log("");
console.log("======================================================");
console.log("ERROR : " + error);
console.log("======================================================");
console.log("");
});
};
</script>
// --------------------------------------------------------------------------------------
// --------------------------------------------------------------------------------------
[결과 출력]
// --------------------------------------------------------------------------------------
======================================================
REQ_TYPE : POST
-----------------------------------------
REQ_URL : https://jsonplaceholder.typicode.com/posts
-----------------------------------------
REQ_HEADER : {"Content-Type":"application/json; charset=UTF-8"}
-----------------------------------------
REQ_BODY : {"userId":1,"id":1}
======================================================
======================================================
RESPONSE_STATUS : 201
-----------------------------------------
RESPONSE_HEADER : {"cache-control":"no-cache","content-length":"30","content-type":"application/json; charset=utf-8","expires":"-1","location":"https://jsonplaceholder.typicode.com/posts/101","pragma":"no-cache"}
-----------------------------------------
RESPONSE_DATA : {"userId":1,"id":101}
======================================================
// --------------------------------------------------------------------------------------
반응형
'Http & Api' 카테고리의 다른 글
Comments