[ Vue.js ] HTTP 통신 - Axios

식빵·2023년 2월 5일

Vue.js

목록 보기

4/4

Vue Resource ❌, Axios 👍

Vue.js 는 예전에 공식 Http library => Vue Resource 가 있었습니다.
하지만 Vue.js 창시자인 Evan You 가 더 이상 이 라이브러리를 관리하지
않을 것이라고 말했기 때문에 이제는 공식 라이브러리가 아닙니다.

그러므로 이 글에서도 해당 라이브러리를 사용하지 않습니다.
대신 우리가 흔히 아는 axios 라이브러를 사용할 것입니다.

참고: Axios 는 Promise 기반의 HTTP 통신 라이브러리입니다.

Axios 사용 예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
  <title>Http With AXIOS</title>
</head>
<body>
<div id="app7">
  <button v-on:click="getTodos">Get Todays Todo List</button>
  <div>
    <ul>
      <!-- v-for 는 그냥 for 문이라고 생각하면 된다. -->
      <li v-for="todo in todos">
        {{todo}}
      </li>
    </ul>
  </div>
</div>

<script>
  new Vue({
    el: '#app7',
    methods: {
      getTodos: function () {
        axios
          .get('https://jsonplaceholder.typicode.com/todos')
          .then((response) => {
            console.log(response.data);
            this.todos = response.data;
          })
          .catch((error) => {
            console.log(error);
          });
      },
    },
    data: {
      todos: []
    }
  });
  
</script>
</body>
</html>

참고 링크

https://github.com/axios/axios

식빵

백엔드를 계속 배우고 있는 개발자입니다 😊

이전 포스트

[ Vue.js ] HTTP 통신 - Axios

Vue.js

Vue Resource ❌, Axios 👍

Axios 사용 예시

참고 링크

[ Vue.js ] 뷰 라우터

0개의 댓글