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