Vue.js axios

Inseok Park·2022년 6월 23일
0

Vue Lv1

목록 보기
7/11
post-thumbnail

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

HTTP 통신 라이브러러 - axios

전반적인 비동기에 대한 사전 이해도가 필요. (callback, Promise, async/await)
Axios 깃헙 주소
자바스크립트 비동기 처리와 콜백 함수
자바스크립트 Promise 이해하기
자바스크립트 async와 await

jsonplaceholder 샘플을 통한 http 통신 (axios)

<div id="app">
  <button v-on:click="getData">get user</button>
  <div>
    {{ users }} <!-- 화면에 vm.users = response.data 바인딩-->
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      users: [] // 빈 배열 셋팅
    },
    methods: {
      getData: function() { 
        const vm = this; // 아래 비동기에서의 this는 뷰인스턴스를 가리키지못하므로 여기서 vm으로 지정 후 아래에서 호출
        axios.get('https://jsonplaceholder.typicode.com/users/')
          .then(function(response) {  // 요청 성공 시 (then)
            console.log(response.data);
  			// this.users = reponse.data 여기서 지정시 뷰인스턴스를 가리키지 못한다.
            vm.users = response.data
          })
          .catch(function(error) { // 요청 실패 시 (catch error)
            console.log(error);
          });
      }
    }
  })
</script>

개발자 도구를 Network -> Fetch/XHR 탭으로 이동해서
위 버튼 <button v-on:click="getData">get user</button>을 화면에서 누르면
네트워크에 대한 요청/응답/결과를 볼 수 있는 패널이 나타난다.
FE개발자로 일하면서 가장 많이 보게 될 패널이다.
Headers는 일반적인 정보, 부가적인 정보 등이 담겨있다. (url, status code 등)
Preview/Response 에선 전달받은 정보를 구조화시켜 보여준다.
프런트엔드 개발자가 알아야 하는 HTTP 프로토콜

구글 개발자도구 공식문서

0개의 댓글