Axios 란?

지난번 Restful API에 대해 알아보면서 HTTP Method에 대해 배워보았습니다. 이러한 API 통신을 위해 클라이언트에 많은 라이브러리가 있는데, 그 중 Axios에 대해 알아보고자 합니다.

Axios에 대해 배우기 전에 우선 AJAX에 대해 알아볼 필요가 있습니다.

AJAX

AJAX란 Asynchronous Javascript And XML(비동기식 Javascript와 XML)의 약자로 Javascript의 라이브러리 중 하나입니다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며, JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술입니다. 간단히 말해보자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것입니다.

비동기 방식이란?

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며, Ajax를 통해서 요청을 한 후 멈춰 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있습니다.

비동기 방식의 장점

페이지 리로드의 경우 전체 리소스를 다시 불러와야 하는데 이미지, 스크립트, 기타 코드 등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만, 비동기 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있어 이러한 낭비를 줄일 수 있다는 장점이 있습니다.

Axios의 특징

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

Axios의 특징은 아래와 같습니다.

운영 환경에 따라 브라우저의 SMLHttpRequest 객체 또는 Node.js의 HTTP API 사용
Promise(ES6) 사용
요청과 응답 데이터의 변형
HTTP 요청 취소 및 요청과 응답을 JSON형태로 자동 변경

Axios 사용법

Axios 다운로드

yarn add axios
npm i axios
#자신의 프로젝트 상위에 import
import axios from ‘axios’

HTTP Methods 활용해보기

1. GET

GET: 입력한 URL에 존재하는 자원에 요청한다.

문법

axios.get(URL, [,config]);

 

import axios from ‘axios’;

axios.get(‘https://localhost:3000/api/user-list’)

          .then((Response) => {console.log(Response.data)})

          .catch((Error) => { console.log(Error)})
[

{ id: 1, pw: '1234', name: 'sunghoon' },

{ id: 2, pw: '1234', name: 'dahyeon' },

{ id: 3, pw: '1234', name: 'yongdae' }

]

응답은 json 형태로 넘어온다.

2. POST

POST: 새로운 리소스를 생성(create)할 때 사용한다.

문법

axios.post(URL , {

          data객체

          }, [ , config]);

POST Method의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.

POST를 사용하면 주소창에 쿼리스트링이 남지 않아 GET보다 안전하다.

axios.post( 'url',

  {

   contact: ‘Sunghoon’,

   email: 'jsh0218131@gmail.com'

   },

  {

   headers:{

    'Content-type': 'application/json',

    'Accept': 'application/json'

      }

    }

)

  .then((response) => { console.log(response.data); })

  .catch((response) => { console.log('Error!) });

3. DELETE

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.

문법

axios.delete(URL , [ , config]);

Delete메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.

axios.delete("/api/post/30")

    .then(function(response){

    }).catch(function(ex){

      throw new Error(ex)

}

4. PUT

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

문법

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

PUT메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.

axios.put("url", {

    username: "",

    password: ""

    }) .then(function (response) {

    }).catch(function (error) {

    }) {

      throw new Error(ex)

}

오늘은 axios 라이브러리에 대해 알아보았습니다.

Reference

https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API#-axios-%ED%8A%B9%EC%A7%95