[JS] Axios

Axios 란?

 

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. Axios는 Fetch API보다 사용이 간편하면서 추가적인 기능들이 포함되어 있다.

 

Fetch API vs Axios

Axios	Fetch API
써드파티 라이브러리로 설치가 필요	빌트인 API라 별도의 설치 필요X
자동으로 JSON데이터 형식으로 변환	.json() 메서드를 사용해야 함

 

Axios 사용법

 

Axios는 써드파티 라이브러리이기 때문에 사용하기 위해서는 설치해야 한다. Axios는 fetch API와 기본 원리는 같다.

npm install axios

---

GET 요청

 

GET 요청은 일반적으로 정보를 요청하기 위해 사용되는 메서드이다.

• 첫번째 인자 : url주소 (필수)
• 두번째 인자 : 요청 시 사용할 수 있는 옵션들을 설정 (필수 X)

axios.get("url"[,config])

 

예시

아래는 fetch API와 axios GET 요청의 예이다.

또한, Promise 버젼과 Async / Await 버젼도 있으니 Promise와 Async / Await의 차이점도 같이 확인해보자.

GET 요청 : fetch API (Promise ver, Async/Await ver)

// ** Promise ver
fetch('https://koreanjson.com/users/1', { method: 'GET' })
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

// ** Async / Await ver
 async function request() {
   const response = await fetch('https://koreanjson.com/users/1', {
     method: 'GET',
   });
   const data = await response.json();
   console.log(data);
 }

 request();

fetch API 결과

response 도 console에 출력해봄.

 

GET 요청 : axios (Promise ver, Async/Await ver)

// axios를 사용하기 위해서는 설치한 axios를 불러와야 한다.
import axios from 'axios';

// **Promise ver
axios
  .get('https://koreanjson.com/users/1')
  .then((response) => {					// response.json() 이 없다.
    console.log(response);			
    const { data } = response;          // 대신 response 객체 속 data 키 값만 가져와야 함.
    console.log(data);
  })
  .catch((error) => console.log(error));

// **Async / Await ver
 async function request() {
   const response = await axios.get('https://koreanjson.com/users/1');
   const { data } = response;
   console.log(data);
 }

 request();

axios 결과

response 객체 안에 data 정보가 들어있음

• 9번째 줄은 비구조 할당으로 response 객체에서 data 키에 해당되는 값들만 불러옴.
• 예)

let blog = {
	owner : "noah",
	url : "noahlogs.tistory.com",
	getPost() { 
		console.log("ES6 문법 정리"); 
	}
};

//기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()

//비구조 할당 방식
let { owner, getPost } = blog;       
//각각 blog 객체의 owner , getPost() 의 데이터가 할당

 

---

 

POST 요청

 

POST 요청은 서버에게 데이터를 보내기 위해 사용되는 메서드이다.

• 첫번째 인자 : url주소 (필수)
• 두번째 인자 : 요청 시 보낼 데이터를 설정 (필수 X)

axios.post("url"[, data[, config]])

예시

POST 요청: fetch API (Promise ver, Async/Await ver)

// **Promise ver
fetch('https://koreanjson.com/users', {
  method: 'POST',
  headers: {
    // JSON의 형식으로 데이터를 보내준다고 서버에게 알려주는 역할이다.
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ nickName: 'ApeachIcetea', age: 20 }),
})
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

// **Async / Await ver
 async function request() {
   const response = await fetch('https://koreanjson.com/users', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({ nickName: 'ApeachIcetea', age: 20 }),
   });
   const data = await response.json();
   console.log(data);
 }

 request();

출력된 콘솔

마찬가지로 response 객체도 출력해봄.

 

 

POST 요청 : axios (Promise ver, Async/Await ver)

// **axios를 사용하기 위해서는 설치한 axios를 불러와야 한다.
import axios from 'axios';

// **Promise ver
axios
  .post('https://koreanjson.com/users', { nickName: 'ApeachIcetea', age: '20' })
  .then((response) => {
    const { data } = response;
    console.log(data);
  })
  .catch((error) => console.log(error));

// **Async / Await ver
 async function request() {
   const response = await axios.post('https://koreanjson.com/users', {
     name: 'ApeachIcetea',
     age: '20',
   });
   const { data } = response;
   console.log(data);
 }

 request();

출력된 콘솔