vue-news app (API 구현)

생성한 컴포넌트에서 실제 데이터를 가져오는 api를 구현한다.

api 통신 라이브러리는 이전 포스팅에서 소개했던 axios를 이용하여 진행하며, api 정보 제공은 hacker news api를 이용한다.

hacker news api

프로젝트 폴더 구조는 다음과 같다.

// api/index.js

import axios from 'axios';

const config = {
  baseUrl: 'https://api.hnpwa.com/v0/'
};

function fetchNews() {
  return axios.get(`${config.baseUrl}`news/1.json);
}

function fetchAsk() {
  return axios.get(`${config.baseUrl}`ask/1.json);
}

function fetchJobs() {
  return axios.get(`${config.baseUrl}`jobs/1.json);
}

function fetchUser(id) {
  return axios.get(`${config.baseUrl}user/${id}.json`);
}

function fetchItem(id) {
  return axios.get(`${config.baseUrl}item/${id}.json`);
}

export {
  fetchNews,
  fetchAsk,
  fetchJobs,
  fetchUser,
  fetchItem
}

api url의 경우 공통되는 string값을 따로 관리한다.(위의 경우 config 객체)

npm으로 설치한 axios의 get() function을 이용하여 Promise 객체를 반환한다.

생성한 각각의 function들은 외부에서도 사용할 수 있게 export를 해준다.
(default가 아니기 때문에 받을 때 import {...} from ~)

NewsView.vue

<template>
  <div>
    <div v-for="item in news" :key="item.id">
        title : {{item.title}}
    </div>
  </div>
</template>

<script>
import { fetchNews } from '../api/index.js';

export default {
  data() {
     return {
        news: []
     }
  },
  created() {
    fetchNews()
      .then(response => this.news = response.data)
      .catch(error => console.log(error));
  }
}
</script>

api/index.js에서 import해온 fetchNews function을 이용하여 Promise 객체를 받아오고
then()을 통해 response 객체를 받아온다.

중요한건 component단에서 axios를 직접 호출 하지 않고, 한 곳에서( ex)api/index.js ) api 호출 로직을 모아두고 필요할때 꺼내 쓰는 방식으로 진행 한다는 것이다.

(repository : 4_pages)

출처 : Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념