[vue] vue axios 이용한 api 서버 통신(api 통해 뉴스 사이트 구현 ver.2)

 

오픈 API를 통하여 블로그 형식의 뉴스 사이트를 
vue.js로 구현하는 예제(ver.2)입니다. 

 

 

예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을
들으면서 공부한 내용입니다.

---

axios 이용한 api 호출

해당 API 문서 주소: http://github.com/tastejs/hacker-news-pwas/blob/master/docs/api.md

tastejs/hacker-news-pwas

 

axios 설치

npm i axios --s

axios에 대한 자세한 설명은 아래 포스트로 이동해주세요. 

https://goddino.tistory.com/89

[js] vue.js에서 axios 사용하여 서버 통신(vue material 테이블에 데이터 뿌리기)

 

api 구조화

▶ 구조화 전

· 각 컴포넌트 안, script 내에 vue의 라이프 사이클, created 안에서 api 호출
· 처음 화면에 뿌려주는 것은 라이프 사이클에서 created 또는 beforeMount 사용

created() {
  axios.get('https://api.hnpwa.com/v0/news/1.json')
    .then(response =>
      return this.array = response.data)
    .error(error => console.log(error))
}

  

▶ 구조화

src 폴더 안에 api 폴더 생성 후 index.js 파일 생성

index.js

import axios from 'axios';

//1.HTTP request & response
const config = {
    baseUrl: 'https://api.hnpwa.com/v0/'
}

//2. API 함수들을 정리
function fetchNewsList() {
   return axios.get(`${config.baseUrl}news/1.json`)
}

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

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

export { //export default 아님
    fetchNewsList,
    fetchAskList,
    fetchJobsList
}

 

각 하위 컴포넌트(NewsView.vue)

<script>
import { fetchNewsList } from "../api/index";

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