[Vue.js] Vue axios로 데이터 가져오기(vue version ajax)

05 Nov 2019 in FrontEnd

VUE axios로 데이터가져오기

내용이 깊어질수록 view의 컴포넌트는 라우팅정보만 담고,

데이터를 불러오는 로직들은 별도의 컴포넌트로 등록해야지 나중에 유연하게 대처할 수 있다.

1. axios로 데이터를 get한다.

<template>
  <div>
    <table>
    </table>
  </div>
</template>

<script>
import { fetchKonggo } from '../api/api.js'
import axios from 'axios';
export default {
  data(){
    return{
      users:[]
    }
  },
  created(){
    var vm = this;
    axios.get('api URL')
    .then(function(response){
      console.log(response);
      vm.users = response.data;
    })
    .catch(function(err){
      console.log(err);
    })
  } 
}
</script>

<style>

</style>

axios는 프로미스기반(.then().catch())으로 api를 제공하기 때문이다.