Vue.js - axios 라이브러리 설치 및 활용

axios

axios는 브라우저 및 node에서도 쓰이는 HTTP client 이며, XMLHttpRequests를 만들어주어 request를 사용할 수 있는 라이브러리이다.

• 간결하게 로직을 구성할 수 있다.
• 데이터를 요청하고 응답받을 때 사용한다.
• 자동으로 JSON 데이터를 변환해준다.
• 거의 대부분의 브라우저를 지원한다.
  
  

https://github.com/axios/axios

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

 

axios 설치

npm install axios

터미널 창을 열고 npm install axios 명령어를 입력하면 axios 설치할 수 있다. 설치 후 package.json 파일에 axios 라이브러리가 추가된 것을 확인할 수 있다.

 

axios 사용전 XMLHttpRequests로 통신할 경우

    const req = new XMLHttpRequest()

    req.open('GET', 'http://localhost:3000/health')
    //  req.send() : 클라이언트 -> 서버 요청 보냄
    req.send()
    // send 완료 후 load 이벤트 호출
    req.addEventListener('load', () => {
      this.loading = false
      this.apiRes = {
        status: req.status, // code
        statusText: req.statusText,
        response: JSON.parse(req.response)
      }
      })

backend단과 api 통신으로 XMLHttpRequest를 사용하여 데이터를 호출하던 코드이다. 

 

axios 활용

import axios from 'axios'

<script> 태그 내 axios를 먼저  import해준다.

axios.get('http://localhost:3000/health')
      .then(res => {
        this.apiRes = res.data
      })
      .catch(res => {
        this.error = res.response.data
      })
      .finally(() => {
        this.loading = false
      })

성공일 경우 apiRes에 호출된 데이터를 담고, error일 경우 error메시지를 담는다.

XMLHttpRequest를 사용하여 통신할 때보다 훨씬 가독성이 좋고 편리하게 호출할 수 있다.

 

호출 결과(성공 / 에러)