[vue.js/react] HTTP 통신 라이브러리 : axios

axios.html

# 액시오스 (Axios) : HTTP 통신 라이브러리

- 뷰에서 권고하는 HTTP 통신 라이브러리

- github 페이지 존재

- Ajax 기반

- 원래 vue-resource라는 라이브러리였는데, 옮겨졌음

- Promise 기반의 HTTP 통신 라이브러리

- github Star / Commit / Contributer 중요

 

# 자바스크립트의 비동기 처리 패턴

1. callback

2. promise

3. promise + generatoer

4. async & await

 

  <div id="app">

    <button v-on:click="getData">get user</button>

    <div>

// 6. 인스넌트 내 데이터 View에 표시

      {{ users }}

    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  // 1. axios 참조

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

  <script>

    new Vue({

      el: '#app',

      data: {

        // 3. 인스턴스 내 users라는 데이터 변수 선언

        users: []

      },

      methods: {

        getData: function() { 

          // 4. Vue 모델을 참조하는 this

          var vm = this;

          // 2. axios get 요청

          // axios.<HTTP Method명>('요청 url')

          axios.get('https://jsonplaceholder.typicode.com/users/')

            .then(function(response) { //.then 성공

              console.log(response.data);

              // 5. Vue 모델 참조해서, 데이터 변수에 결과값 할당

              vm.users = response.data; // 결과 추출

            })

            .catch(function(error) { //.catch 에러

              console.log(error);

            });

        }

      }

    })

  </script>

 

# 웹서비스에서의 클라이언트와 서버와의 HTTP 통신 구조

클라이언트 <HTTP Request, HTTP Response> 서버 <DB 로직> DB

 

# 크롬 개발자 도구 네트워크 패널 보는 방법

Status Code : 200 -> 정상적으로 데이터를 받았다.