[Vue.js 시작하기] - axios 사용하여 서버 통신 하기

Axios란?

javascript 어플리케이션에서 서버 통신을 하기 위한 HTTP 통신 라이브러리다. 착각하면 안되는 것은 오직 Vue.js에 종속되는 것이 아니라 다른 js 어플리케이션에서도 일반적으로 많이 사용된다는 사실이다.

 

github.com/axios/axios

axios/axios

 

설치

기존 프로젝트에서 axios로 서버와 통신 하기 위해서는 이를 node_modules에 설치해야한다. 이때 다음과 같은 명령어를 사용하면 된다.

 

npm install axios

 

이후 /node_modules에 axios가 추가된 것을 확인할 수 있다.

 

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

import axios from 'axios'
// axios를 import

Vue.prototype.$eventBus = new Vue();
Vue.prototype.$axios = axios
// 다른 컴포넌트에서는 import 없이 this.$axios로 사용가능

export default new Vuetify({
  icons: {
    iconfont: 'md' // 'md' || 'mdi' || 'fa' || 'fa4'
  }
})

Vue.use(Vuetify)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  vuetify: new Vuetify(),
})

라이브러리를 설치하면 항상 그러하듯 가장 상위 인스턴스인 main.js에 추가해주어야한다.

전역으로 axios를 사용하기 위해서 Vue.prototype.$axios를 정의했다.

따라서 다른 컴포넌트에서는 import 하지않고 this.$axios로 간단하게 사용할 수 있다.

 

GET

<script>
const HOST = "";

export default {
  methods: {
    getData() {
      this.$axios
        .get(HOST + "/api/getData")
        .then((res) => {
          console.log(res.staus);
          console.log(res.data);
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          console.log("항상 마지막에 실행");
        });
    },
  },
};
</script>

axios.get을 사용하여 서버의 데이터를 불러오는 것을 요청할 수 있다. 이때 첫번째 parameter에는 axios에 전달할 서버의 url이 들어간다. 두번째 parameter에는 config 객체를 선택적으로 추가 전달을 할 수 있다. 이는 아래 예제에서 확인할 수 있다.

 

<script>
const HOST = "";

export default {
  methods: {
    getData() {
      this.$axios
        .get(HOST + "/api/getData", {
          headers: { "X-AUTH-TOKEN": "인증 받음을 증명하는 토큰" },
        })
        .then((res) => {
          console.log(res.staus);
          console.log(res.data);
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          console.log("항상 마지막에 실행");
        });
    }
  },
};
</script>

만약 데이터 불러오는 것을 요청할때, 요청하는 사람이 인증되었음을 증명하는 것이 필요하다면 headers의 X-AUTH-TOKEN에 토큰을 포함해 증명할 수 있다.

 

POST

<script>
const HOST = "";

export default {
  methods: {
    postData() {
      let saveData = {};
      saveData.title = "axios POST request";
      saveData.index = 0;

      this.$axios
        .post(HOST + "/api/postData", JSON.stringify(saveData))
        .then((res) => {
          console.log(res.staus);
          console.log(res.data);
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          console.log("항상 마지막에 실행");
        });
    },
  },
};
</script>

axios.post를 사용하여 서버의 데이터에 입력을 할 수 있다. 위는 입력할 data를 json 형태로 담아 보낼때의 예제이다.

첫번째 parameter에는 axios에 전달할 서버의 url, 두번째 parameter에는 입력할 데이터가 들어간다.

마찬가지로 세번째 parameter에는 선택적으로 config 객체를 추가할 수 있다.

 

PUT

<script>
const HOST = "";

export default {
  methods: {
    putData() {
      let number = "0";
      let updateData = {};
      updateData.title = "axios PUT request";
      updateData.index = 0;

      this.$axios
        .put(HOST + "/api/putData" + number, JSON.stringify(updateData))
        .then((res) => {
          console.log(res.staus);
          console.log(res.data);
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          console.log("항상 마지막에 실행");
        });
    },
  },
};
</script>

PUT은 서버 내부적으로 GET 다음 POST를 거치기 때문에 POST와 사용형태가 같아 헷갈릴 수 있다. 하지만 POST는 서버에 데이터를 새로 입력하여 등록한다면 PUT은 기존 데이터를 수정 할 수 있다.

첫번째 parameter에는 axios에 전달할 서버의 url, 두번째 parameter에는 수정할 데이터가 들어간다.

마찬가지로 세번째 parameter에는 선택적으로 config 객체를 추가할 수 있다.

 

DELETE

<script>
const HOST = "";

export default {
  methods: {
    deleteData() {
      let deleteKey = "123";
      this.$axios
        .delete(HOST + "/api/deleteData" + deleteKey)
        .then((res) => {
          console.log(res.staus);
          console.log(res.data);
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          console.log("항상 마지막에 실행");
        });
    },
  },
};
</script>

axios.delete를 사용하여 데이터를 삭제할 수 도 있다. 첫번째 parameter에는 앞에서도 그러하듯 axios에 전달할 서버의 url이 들어간다. 보통 삭제할 경우에 참고할 점은 url의 마지막에는 삭제할 객체를 구분할 수 있는 key가 들어간다.

 

하지만 필요에 의해서 data 파라미터가 들어갈 일이 있다면, 두번째 parameter에 {data: {프로퍼티 : n}} 와 같은 형식으로 사용할 수는 있다.

 

비동기 처리 (async/await)

axios를 사용하면서 주의할 점이 있다. 이는 axios가 Promise 기반의 자바스크립트 비동기 처리방식을 사용한다는 것이다. 이때의 문제점은 처리 순서를 지정하지 않으면 request 요청을 보내고 나서 response로 응답도 받기 전에 바로 다음 구문을 수행해 버리기 때문에 원하는 결과를 받아오지 못한다는 점이다. 실제로 이 때문에 프로젝트를 진행하며 오랜 시간을 헤맸다. 해결방법은 async/await를 사용하여 처리 순서를 지정해주는 것이다.

 

<script>
const HOST = "";

export default {
  data() {
    return {
      allPeopleList: [],
      allAnimalList: [],
    };
  },
  created() {
    this.getMultiData();
  },
  methods: {
    async getMultiData() {
      try {
        this.allPeopleList = await axios
          .get(HOST + "api/getAllPeople")
          .then((res) => {
            console.log(res.staus);
            console.log(res.data);
          })
          .catch((error) => {
            console.log(error);
          })
          .finally(() => {
            console.log("항상 마지막에 실행");
          });
        console.log(this.allPeopleList);
      } catch (error) {
        console.error(error);
      }

      try {
        this.allAnimalList = await axios
          .get(HOST + "api/getAllAnimal")
          .then((res) => {
            console.log(res.staus);
            console.log(res.data);
          })
          .catch((error) => {
            console.log(error);
          })
          .finally(() => {
            console.log("항상 마지막에 실행");
          });
        console.log(this.allAnimalList);
      } catch (error) {
        console.error(error);
      }
    }
  },
};
</script>

위의 예제는 컴포넌트가 생성될 때, 모든 사람과 모든 동물의 데이터 목록을 서버에서 가져오는 예제이다.  axios를 사용하는 getMultiData 함수를 보면 async 키워드가 붙은 것을 볼 수 있다. 각 api를 호출하는 axios 앞에 await 키워드를 붙여줌으로써 처리 순서를 지정해주었다. 쉽게 말해서 모든 사람의 데이터를 가져오는 구문이 끝이 나야 모든 동물의 데이터를 가져오는 구문이 시작되는 것이다. 그리고 async/await는 오류 디버깅을 위해 try catch 구문을 사용해야 한다.

 

이 밖에도 axios 관련 함수들이 많은데, 오늘 다룬 내용으로도 서버와의 통신은 충분히 가능하므로 다음에 기회가 되면 더 다루도록 하겠다.