Axios
Promise based HTTP client for the browser and node.js Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.
axios-http.com
시작하기 | Axios Docs
시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코
axios-http.com
Axios란?
Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.
특징
- 브라우저를 위해 XMLHttpRequests 생성
- node.js를 위해 http 요청 생성
- Promise API를 지원
- 요청 및 응답 인터셉트
- 요청 및 응답 데이터 변환
- 요청 취소
- JSON 데이터 자동 변환
- XSRF를 막기위한 클라이언트 사이드 지원
설치
npm 사용하기:
$ npm install axios
bower 사용하기:
$ bower install axios
yarn 사용하기:
$ yarn add axios
jsDelivr CDN 사용하기:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
unpkg CDN 사용하기:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
일단 예제 하나를 만들어 보고 시작 하겠습니다.
다음은 axios를 이용하여 이미지를 받아 화면에 표시한 예제 입니다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios 사용</title>
<script>
window.onload = () => {
const img = document.querySelector("img");
axios({
method: 'get',
url: img_url,
responseType: 'blob', // 응답 데이터는 Blob 형식
})
.then((response) => {
console.log(response);
const imageUrl = URL.createObjectURL(response.data);
img.src = imageUrl;
}).catch((error) => {
console.log("error:", error);
}).finally(() => {
console.log("finally!!!!");
});
}
</script>
<style>
figure {
width: 350px;
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
</style>
</head>
<body>
<h2>Axios 원격 API 호출하기</h2>
<hr>
<figure>
<img src="" class="img" />
<figcaption>
</figcaption>
</figure>
</body>
</html>
|
F12키를 눌러 개발자 모드의 console 창을 열어 확인한 내용입니다.
이미지 하단에 다운로드하는 링크를 달아보겠습니다.
위 html 파일을 수정합니다.
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios 사용</title>
<script>
window.onload = () => {
const img = document.querySelector("img");
axios({
method: 'get',
url: img_url,
responseType: 'blob', // 응답 데이터는 Blob 형식
})
.then((response) => {
console.log(response);
const imageUrl = URL.createObjectURL(response.data);
img.src = imageUrl;
//=================================================================
// 추가
//------------------------------------------------------------------------------------------------------------------
// 'a' 요소를 생성하여 link라는 이름의 상수에 할당 (이 요소는 다운로드 링크를 나타냄)
const link = document.createElement('a');
// 'a' 요소의 href 속성을 다운로드할 URL인 objectURL 설정
link.href = objectURL;
// 'a' 요소의 download 속성을 설정하여 파일 이름을 지정
link.setAttribute('download', 'pexels-photo-669015.jpg');
link.innerHTML = '이미지다운로드'
// 'a' 요소를 문서의 본문(body)에 추가
document.body.appendChild(link);
// 'a' 요소를 클릭하여 다운로드를 시작
//link.click();
// 'a' 요소를 문서에서 제거
//link.remove();
//==================================================================
}).catch((error) => {
console.log("error:", error);
}).finally(() => {
console.log("finally!!!!");
});
}
</script>
<style>
figure {
width: 350px;
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
</style>
</head>
<body>
<h2>Axios 원격 API 호출하기</h2>
<hr>
<figure>
<img src="" class="img" />
<figcaption>
</figcaption>
</figure>
</body>
</html>
|
다운로드 링크가 생겼으며 클릭시 다운로드 되는것을 확인할 수 있습니다.
어떻게 보셨나요 재미있을것 같지요 자세하게 알아보도록 하겠습니다.
비동기식으로 원격의 서버에 데이터를 요청하여 처리하는 Ajax (Asynchronous JavaScript and XML, 에이잭스) 기능을 지금까지는 XMLHttpRequest 객체를 사용해 왔었습니다.
fetch 함수가 나오기는 했지만 라이브러리로 주로 많이 사용되는 Ajax 라이브러리가 Axios입니다. 자세하게 알아 보도록 하겠습니다.
무료로 가짜 API를 사용할 수 있어 각종 테스트를 진행할 수 있는 JSONPlaceholder를 이용하여 실습을 진행 하도록 하겠습니다.
https://jsonplaceholder.typicode.com
JSONPlaceholder - Free Fake REST API
{JSON} Placeholder Free fake and reliable API for testing and prototyping. Powered by JSON Server + LowDB. Serving ~3 billion requests each month.
jsonplaceholder.typicode.com
간단하게 글 하나를 읽어와 보겠습니다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios GET 사용</title>
<script>
window.onload = () => {
// const url = "https://xxxx.typicode.com/posts/1";
axios.get(url)
.then((response) =>{
console.log(response);
console.log(JSON.stringify(response.data));
}).catch((error) => {
console.log("error:", error);
}).finally(()=>{
console.log("finally!!!!");
});
}
</script>
</head>
<body>
<h2>Axios 원격 API 호출하기</h2>
<hr>
</body>
</html>
|
성공시
실패시
JSON 데이터가 아닌 데이터도 얼마든지 요청이 가능합니다. 첫번째 예제에서 보았듯이 이미지도 요청이 가능합니다. 다음은 Text형식의 데이터 처리를 해보도록 하겠습니다. 회원 약관, 개인보호 정책 등 대량의 데이터를 읽어와 표시할때 편리하게 사용하시면 됩니다.
ata 폴더를 만들고 다음의 파일 3개를 넣어 둡니다. 파일의 내용은 아무의미 없는 문구입니다. text3.txt 파일에는 html태그를 2개 적용시켜 보았습니다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios GET 사용</title>
<script>
function fileRead(no) {
let url = `./data/text${no}.txt`;
axios.get(url, {
headers: {
'Content-Type': 'text/plain'
},
responseType: 'text'
})
.then((response) => {
let content = response.data;
console.log(content);
// document.querySelector("#content").innerText = content;
document.querySelector("#content").innerHTML = content;
})
.catch((error) => {
console.log(error);
});
}
</script>
</head>
<body>
<h2>Axios 원격 API 호출하기</h2>
<hr>
<button onclick="fileRead(1)"> 파일 읽기 1</button>
<button onclick="fileRead(2)"> 파일 읽기 2</button>
<button onclick="fileRead(3)"> 파일 읽기 3</button>
<hr>
<div id="content"></div>
</body>
</html>
|
요청시 옵션을 지정해서 요청하면 데이터 타입을 변경 가능합니다.
|
axios.get(url, {
headers: {
'Content-Type': 'text/plain'
},
responseType: 'text'
})
|
CRUD 작업을 해보겠습니다.
조회 : GET방식의 요청입니다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios GET 사용</title>
<script>
window.onload = () => {
.then((response) =>{
console.log(response);
// Axios는 기본값으로 JSON을 반환 합니다.
const json = response.data
console.log(JSON.stringify(json));
// ul태그 작성
let mylist = document.createElement('ul');
for(let comment of json){
console.log(JSON.stringify(comment));
let li = document.createElement('li');
// li태그에 내용 추가
li.textContent = `${comment.name} : ${comment.content}`;
// ul태그에 자식으로 추가
mylist.appendChild(li);
}
// ul태그를 body에 자식으로 추가
document.body.appendChild(mylist);
});
}
</script>
</head>
<body>
<h2>Axios 원격 API 호출하기</h2>
<hr>
</body>
</html>
|
저장 : POST 요청입니다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios POST 사용</title>
<script>
window.onload = () => {
userId: 2,
title: "제목입니다.",
body: "내가 작성한 제목입니다.",
})
.then((response) =>{
console.log(response);
const json = response.data;
// ul태그 작성
let mylist = document.createElement('ul');
// JSON요소 반복
for(let key in json){
// li태그 작성
let li = document.createElement('li');
// li태그에 내용 추가
li.textContent = `${key} : ${json[key]}`;
// ul태그에 자식으로 추가
mylist.appendChild(li);
}
// ul태그를 body에 자식으로 추가
document.body.appendChild(mylist);
console.log('저장이 완료되었습니다.');
});
}
</script>
</head>
<body>
<h2>Axios 원격 API 호출하기</h2>
<hr>
</body>
</html>
|
Response 객체의 상태 코드를 보면 GET 요청에 200 OK 응답과 POST 요청에 201 Created 임을 확인 가능합니다.
전체 수정 : PUT 요청입니다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios PUT 사용</title>
<script>
window.onload = () => {
axios({
method : 'put',
data : {
userId: 2,
title: "바뀐 제목",
body: "바뀐 내용입니다.",
}
})
.then((response) =>{
console.log(response);
const json = response.data;
// ul태그 작성
let mylist = document.createElement('ul');
// JSON요소 반복
for(let key in json){
// li태그 작성
let li = document.createElement('li');
// li태그에 내용 추가
li.textContent = `${key} : ${json[key]}`;
// ul태그에 자식으로 추가
mylist.appendChild(li);
}
// ul태그를 body에 자식으로 추가
document.body.appendChild(mylist);
console.log('수정이 완료되었습니다.');
});
}
</script>
</head>
<body>
<h2>Axios 원격 API 호출하기</h2>
<hr>
</body>
</html>
|
일부 수정 : PATCH 요청입니다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios PATCH 사용</title>
<script>
window.onload = () => {
axios({
method : 'PATCH',
data : {
body: "바뀐 내용입니다.",
}
})
.then((response) =>{
console.log(response);
const json = response.data;
// ul태그 작성
let mylist = document.createElement('ul');
// JSON요소 반복
for(let key in json){
// li태그 작성
let li = document.createElement('li');
// li태그에 내용 추가
li.textContent = `${key} : ${json[key]}`;
// ul태그에 자식으로 추가
mylist.appendChild(li);
}
// ul태그를 body에 자식으로 추가
document.body.appendChild(mylist);
console.log('일부분 수정이 완료되었습니다.');
});
}
</script>
</head>
<body>
<h2>Axios 원격 API 호출하기</h2>
<hr>
</body>
</html>
|
삭제 : DELETE 요청입니다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios DELETE 사용</title>
<script>
window.onload = () => {
axios({
method : 'delete',
})
.then((response) =>{
console.log(response);
console.log('삭제가 완료되었습니다.');
});
}
</script>
</head>
<body>
<h2>Axios 원격 API 호출하기</h2>
<hr>
</body>
</html>
|
사용방법이 아주 간단하기 때문에 Ajax 기능을 사용 시 아주 요긴하게 사용할 수 있습니다.
fetch() 함수나 Axios 라이브러리 중에서 여러분이 편한것을 사용하시면 됩니다.
더 자세한 내용은 홈페이지 메뉴얼을 참조하시기 바랍니다.
시작하기 | Axios Docs
시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코
axios-http.com
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] localforage 사용해 보기 (0) | 2024.11.13 |
|---|---|
| [JavaScript] SPA/MPA & SSR/CSR (5) | 2024.11.12 |
| [JavaScript] Fetch API 사용해보기 (1) | 2024.11.08 |
| [JavaScript] JSON-SERVER 사용해 보기 (4) | 2024.11.07 |
| [JavaScript] Async & Await 알아보기 (7) | 2024.11.07 |
