[Vue] HTTP 통신

참고 : Vue.js 입문책을 읽고 학습한 내용을 블로그에 정리한 글이므로 내용상 오류가 있을 수 있습니다. 
        오류가 있다면 댓글 남겨주시면 감사하겠습니다.

HTTP(HyperText Transfer Protocol) 통신

• HTTP는 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜(규칙)
• 브라우저에서 특정 데이터를 보내달라고 요청(request)을 보내면 서버에서 응답(response)으로 해당 데이터를 보내주는 방식으로 동작
• Vue에서 HTTP통신의 대표적인 사례는 액시오스(axios)

액시오스(axios)

• Vue에서 가장 많이 사용되는 HTTP통신 라이브러리
• axios는 promise기반의 API형식이 다양하게 제공되어 별도의 로직이 필요없어서 쉽게 구현 가능

      // HTTP GET 요청
      // then() 데이터를 정상적으로 받아올 때 실행되는 로직
      // catch() 데이터를 받아올 때 오류가 발생하면 실행되는 로직

      axios.get('URL 주소').then().catch()

      // HTTP post 요청
      
      axios.post('URL 주소').then().catch()

      // 자세한 옵션을 직접 정해서 HTTP 요청
      
      axios({
        method:'HTTP요청 방식',
        url:'URL 주소',

        ...(옵션 속성)
        
      })

 

예제) 강아지 종류

    <div id="test">
      <button v-on:click="getData">강아지 종류</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- Vue - CDN -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- Vue Axios - CDN -->

    <script>

    new Vue({
      el:'#test',
      methods: {
        getData: function(){
          axios.get('https://dog.ceo/api/breeds/list/all')
          .then(function(response){
            console.log(response);
          });
        }
      }
    });

    </script>

 

1. div태그 안에 있는 버튼(강아지 종류) 클릭

2. URL주소에 HTTP get방식으로 데이터 요청

3. 데이터 응답 성공하면 .then(response) 함수에 있는 console 내용 실행

 

출력

 

(버튼 클릭 전)

(버튼 클릭 후)

 

(주의)

axios를 사용하여 데이터에 접근할때는 화살표함수 사용

(일반 함수)

  data(){
    return {
      result: []
    }
  },
  methods: {
    getData: function(){
      axios.get('https://dog.ceo/api/breeds/list/all')
      .then(function(response) {
        console.log(response)
        this.result = response
      })
    }
  }

(화살표 함수)

  data(){
    return {
      result: []
    }
  },
  methods: {
    getData: function(){
      axios.get('https://dog.ceo/api/breeds/list/all')
      .then(response => {
        console.log(response)
        this.result = response
      })
    }
  }