Vue HTTP 통신 라이브러리 - axios

이번 시간에는 http 통신 라이브러리 axios를 이용하여 API를 호출하여 서버 데이터 바인딩을 하는 방법을 알아봅니다.

 

1. Axios란?

axios는 서버와 데이터를 송수신할 수 있는 HTTP 비동기 통신 라이브러리입니다. Vue.js 개발 시 서버와 통신을 위해 가장 많이 사용되는 라이브러리입니다. 이는 Promise 기반의 HTTP 통신 라이브러리입니다.

아래 사이트에서 설치 방법, 사용법 등에 대해서 확인 가능합니니다.

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

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

 

2. http 통신 구조

axios를 사용하기 전에 우선 http 통신 구조를 알아봅시다.

아래 그림을 살펴봅시다. 가장 처음으로 Client가 http 요청을 날립니다. 그다음 서버에서 백엔드 처리를 진행합니다. 3번에서 백엔드 로직 처리 중 db에 접근을 해서 4번에서 db 결과를 얻습니다. 5번에서 다시 4번에서 얻은 db 결과를 백엔드에서 처리합니다. 마지막으로 http 응답을 client에서 보냅니다.

 

3. Axios 설치

3-1. CDN 방식

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3-2. NPM 방식

$ npm install axios --save 

 

 

4. Axios request methods

제공하는 request methods는 다음과 같습니다.

- axios.request(config)
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.options(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])

 

5. Axios 데이터 바인딩 실습

https://jsonplaceholder.typicode.com/users/ 에서 axios.get 요청으로 데이터를 받고 테이블에 뿌려줍니다.

<template>
  <div>
    <table>
      <thead>
      <tr>
        <th>이름</th>
        <th>이메일</th>
        <th>전화번호</th>
        <th>웹사이트</th>
      </tr>
      </thead>
      <tbody>
      <tr :key="i" v-for="(user,i) in userList">
        <td>{{user.name}}</td>
        <td>{{user.email}}</td>
        <td>{{user.phone}}</td>
        <td>{{user.website}}</td>
      </tr>
      </tbody>
    </table>

  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      userList: [ ]

    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList: function() {
      var vm = this;
      axios.get('https://jsonplaceholder.typicode.com/users/')
          .then(function(response) {
            vm.userList = response.data;
          })
          .catch(function(error) {
            console.log(error);
          });
    }
  }
}
</script>
<style scoped>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
</style>

위 코드를 실행하면 아래와 같은 테이블을 확인할 수 있습니다.

코드 실행 결과

 

 

 

이번 시간에는 Vue HTTP 통신 라이브러리인 axios에 대해 알아보고 실습을 진행하였습니다.