[Vue.js] axios (비동기식 처리)

axios

Vue에서 권고하는 Promise(js 비동기처리 패턴) 기반의 HTTP 라이브러리 입니다.

Promise를 사용하면 비동기식 처리 상에서 데이터가 넘어오지 않으면 다음 코드가 실행되지 않도록, 즉 데이터가 넘어왔을 때만 다음 코드가 실행되도록 하는 콜백 처리를 해줄 수 있습니다.

js 비동기처리 패턴

1. callback
2. promise
3. promise + generator
4. async & await

대표적인 Promise 인스턴스 메서드에는 then()과 catch(), finally() 이 있어 요청이 성공/실패/보류됐을 때 처리해줄 수 있습니다.

비동기를 이해하기 위해선 자바스크립트의 동작원리: 엔진, 런타임, 호출 스택을 아는 것이 중요합니다. 자바스크립트는 싱글 스레드 기반이기 때문입니다.

싱글 스레드는 멀티 스레드 환경에서 제기되는 복잡한 문제나 시나리오를 고민하지 않아도 되지만 하나의 호출 스택만 가지기 때문에 실행이 느려질 가능성이 큽니다. 특히 이미지 프로세싱 작업같은 경우 긴 시간이 소요되기 때문에 이 함수가 실행되는 동안 브라우저는 아무 작업도 못하고 대기 상태가 되버립니다. 이 시점이 바로 비동기 콜백이 필요한 부분이며 Promise는 비동기 처리를 위한 라이브러리 입니다.

axios를 사용해 json placeholder가 제공하는 데이터들을 화면에 출력하는 코드입니다.

  <div id="app">
    <button v-on:click="getData">get user</button>
    <div>
      {{ users}}
    </div>
  </div>

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

  <script>

    new Vue({
      el: '#app',
      data: {
        users: []
      },
      methods: {
        getData: function() {
          var vm = this;
          axios.get('https://jsonplaceholder.typicode.com/users')
          .then(function(response) {
            console.log(response.data);
            vm.users = response.data;
          })
          .catch(function(error) {
            console.log(error);
          });
        }
      }
    });
  </script>

---

참고자료

• MDN - Promise
• 캡틴판교님 - 자바스크립트 비동기 처리와 콜백함수
• 캡틴판교님 - 자바스크립트 Promise 쉽게 이해하기
• 캡틴판교님 - 자바스크립트 async와 await
• 캡틴판교님 - 자바스크립트 동작원리: 엔진, 런타임, 호출 스택
• 캡틴판교님 - 프런트엔드 개발자가 알아야하는 HTTP 프로토콜 part1