[vue-news] API 구현 - axios를 이용한 api 호출

💻 axios를 이용한 api 호출

해커뉴스 api 링크 : https://github.com/tastejs/hacker-news-pwas/blob/master/docs/api.md

views라는 폴더에 담긴 컴포넌트들은 페이지에 관한 라우팅만 들어가는 것이 좋다.

1. axios 설치 npm i axios --save
2. NewsView.vue

<template>
  <div>
  	<div v-for="user in users">{{ user }}</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    }
  }
  created() {
    var vm = this;
    // promise 기반 객체
    axios.get('https://api.hnpwa.com/v0/news/1.json)
    .then(function(response){
      console.log(response);
      vm.users = response.data
    })
    .catch(function(error){
      console.log(error);
    })
  },
}
</script>