Vue.js(6)

Axios

• Vue에서 가장 많이 사용하는 HTTP 통신 라이브러리이다. CDN 과 NPM 설치 방식 모두 지원하며 사용하기 좋은 속성과 API가 많다.
• 무엇보다 Promise 기반(비동기 처리)이라 코드를 간결하게 작성하기 용이하다.
• Get, Post, Put, Delete 가 있고 비동기처리를 효율적으로 해줄 async / await 가 있다.

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

npm install axios // NPM

설치를 한 후 컴포넌트에서 아래와 같은 코드로 사용한다.

methods: {
  fetchData: function() {
    axios.get('URL 주소');
  }
}

Axios.GET

• Axios.get 을 이용해 서버의 데이터를 불러오는 것을 요청할 수 있다. 이때 첫번째 parameter에는 axios에 전달할 서버의 url이 들어간다.
  두번째 parameter에는 config 객체를 선택적으로 추가 전달을 할 수 있다.(데이터 불러오는 것을 요청할때, 요청하는 사람이 인증되었음을 증명하는 것이 필요하다면 headers 의 X-AUTH-TOKEN 에 토큰을 포함해 증명이 가능하다)
• ( $ axios를 사용하기 위해 Main.js 등 axios를 import하고 Vue.prototype.$axios = axios 등 선언을 해야지 아래의 예제들 처럼 $axios로 사용이 가능하다. )

<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>

Axios.POST

• axios.post를 사용하여 서버의 데이터에 입력을 할 수 있다. 첫번째 parameter에는 axios에 전달할 서버의 url, 두번째 parameter에는 입력할 데이터가 들어간다. 마찬가지로 세번째 parameter 에는 선택적으로 config 객체를 추가 할 수 있다. 입력할 data를 json 형태로 담아 보낼때의 예제를 보자.

<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.PUT

• axios.put은 서버 내부적으로 GET 다음 POST를 거치기 때문에 POST와 사용형태가 같아 헷갈릴 수 있다. 하지만 차이점을 본다면 POST는 서버에 데이터를 새로 입력하여 등록 한다면, PUT은 기존 데이터를 수정 할 수 있다.
  첫번째 parameter 에는 axios에 전달할 서버의 url, 두번째 parameter 에는 수정할 데이터가 들어간다. 마찬가지로 세번째 parameter에는 선택적으로 config 객체가 추가 가능하다.

<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>

Axios.DELETE

• axios.delete를 사용하여 데이터를 삭제할 수 있다. 첫번째 parameter에는 axios에 전달할 url이 들어가는데 보통 삭제할 경우에 참고할 점은 url의 마지막에는 삭제할 객체를 구분할 수 있는 key가 들어간다.
  하지만 필요에 의해서 data 파라미터가 들어갈 일이 있다면, 두번째 parameter에 {data:{property:n}}과 같은 형식으로는 사용할 수 있다.

<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>

비동기 처리(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관련 함수axios.request, axios.options, axios.patch, axios.head 등이 있지만 이 함수들은 다음에 더 공부를 하자(Vue.js 프로젝트 투입 일주일전 - 저자 고승원 - 책을 통해 공부할 예정)

느낀점

Axios는 HTTP통신 라이브러리인데 뭔가 CRUD 비슷한 느낌을 내면서도 다르니깐 헷갈린다. 하지만 이제 업무 투입이 된다면 백단에서 만들어진 HTTP 통신을 원할하게 하기 위해 다 머리속에 집어 넣어야된다. 그리고 자바에서 사용하는 try catch 문을 Vue에서도 사용한다는 것이 신기했고, 일단 이것을 공부하기 위해 내 JavaScript 지식이 너무 빈약하기에 JavaScript 또한 시간이 날 때 마다 틈틈히 공부를 해야겠다.