μ•‘μ‹œμ˜€μŠ€

λ·°μ—μ„œ κΆŒκ³ ν•˜λŠ” HTTP 톡신 λΌμ΄λΈŒλŸ¬λ¦¬λŠ” μ•‘μ‹œμ˜€μŠ€(Axios)μž…λ‹ˆλ‹€. Promise 기반의 HTTP 톡신 라이브러리이며 μƒλŒ€μ μœΌλ‘œ λ‹€λ₯Έ HTTP 톡신 λΌμ΄λΈŒλŸ¬λ¦¬λ“€μ— λΉ„ν•΄ λ¬Έμ„œν™”κ°€ μž˜λ˜μ–΄ 있고 APIκ°€ λ‹€μ–‘ν•©λ‹ˆλ‹€.

μ•‘μ‹œμ˜€μŠ€ μ„€μΉ˜

ν”„λ‘œμ νŠΈμ— μ•‘μ‹œμ˜€μŠ€λ₯Ό μ„€μΉ˜ν•˜λŠ” 방법은 CDN 방식과 NPM 방식 2가지가 μžˆμŠ΅λ‹ˆλ‹€.

CDN 방식

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

NPM 방식

npm install axios

μ•‘μ‹œμ˜€μŠ€ μ‚¬μš©λ°©λ²•

라이브러리λ₯Ό μ„€μΉ˜ν•˜κ³  λ‚˜λ©΄ axiosλΌλŠ” λ³€μˆ˜μ— μ ‘κ·Όν•  수 있게 λ©λ‹ˆλ‹€. axios λ³€μˆ˜λ₯Ό μ΄μš©ν•˜μ—¬ μ•„λž˜μ™€ 같이 HTTP GET μš”μ²­μ„ λ‚ λ¦¬λŠ” μ½”λ“œλ₯Ό μž‘μ„±ν•©λ‹ˆλ‹€.

<div id="app">
  <button v-on:click="fetchData">get data</button>
</div>
new Vue({
  el: '#app',
  methods: {
    fetchData: function() {
      axios.get('https://jsonplaceholder.typicode.com/users/')
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
})

μœ„ μ½”λ“œλŠ” get data λ²„νŠΌμ„ ν΄λ¦­ν–ˆμ„ λ•Œ μ‚¬μš©μž 정보λ₯Ό λ°›μ•„μ˜€λŠ” μ½”λ“œμž…λ‹ˆλ‹€. μ‹€ν–‰ν•˜λ©΄ μ‚¬μš©μž 정보가 λΈŒλΌμš°μ € 개발자 λ„κ΅¬μ˜ μ½˜μ†”μ— 좜λ ₯λ©λ‹ˆλ‹€.

기타 μ•‘μ‹œμ˜€μŠ€ API

기타 μ•‘μ‹œμ˜€μŠ€ κ΄€λ ¨ μ˜ˆμ œμ™€ APIλŠ” μ•‘μ‹œμ˜€μŠ€ λ¬Έμ„œλ₯Ό μ°Έκ³ ν•©λ‹ˆλ‹€.