TIL no.39 - axios 를 이용한 서버 통신 방법 !

axios 는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.

*HTTP

 

axios 의 특징

- Promise(ES6) API를 사용

- 요청과 응답 데이터의 변형

- HTTP 요청 취소 (요청 중단 가능)

- HTTP 요청과 응답을 JSON 형태로 자동 변경

- async/await 문법을 사용하여 쉽게 XHR 요청 가능

- Node.js 에서의 사용

 

*XHR 

 

 

axios 에서 사용하는 HTTP 메소드

GET : 입력한 url 에서의 데이터를 받아오기를 요청합니다.

axios.get(url,[,config])

 

GET 메소드는 데이터의 값이나 상태를 변경할 수 없습니다. 데이터를 받아와 읽고 보여주는 역할만 합니다.

axiosa는 Promise 를 사용하는 통신 방법이기 때문에 함께 사용되는 모습을 보겠습니다.

 

import axios from 'axios';

axios.get(url 주소).then((response) => { 
	console.log(response.data);
    }).catch((error) => {
    console.log(error);
   	})

위와 같은 방식으로 Promise 비동기 처리 객체를 함께 사용합니다.

 

POST 

axios.post(url 주소, {data 객체}, [,config])

POST 메소드에서는 두번째 인자를 본문에 담아 보낼 데이터를 설정해 객체 리터럴을 전달합니다.

 

DELETE

axios.delete(url 주소, [,config]);

DELETE 메소드는 서버에 있는 데이터의 내용을 삭제하는 용도로 사용하기 때문에 두번째 인자를 전달하지 않습니다.

 

PUT

REST 기반 API 에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용합니다.

axios.put(url 주소[, data[, config]])

 

Promise 객체를 이용한 axios 사용 방법

const axios = require('axios');

const getData = () => {
	try {
    	return axios.get( url 주소 );
       } catch(error) {
       	console.log(error)
       }
};
      
 
const Book = () => {
	const books = getData()
    	.then(response => {
        if(response.data.MESSAGE) {
        	console.log(books.data.MESSAGE)
          } .catch(error => {
          	console.log(error);
          })
};

Books();

위와 같이 사용하며 

 

GET, POST 에는 param 매개변수를 추가해서 url을 요청할 수 있습니다.