Vue.js 완벽 가이드 - 6. API 구현

이 스리즈에서는 인프런 강좌
"Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념" 을 수강하고 복습을 위한 기록을 하고 있습니다. 자세한 강의내용이 궁금하신 분은 https://www.inflearn.com/course/vue-js/dashboard 의 링크를 참고하세요.

이 상태로도 API 구현 작업이 가능하나 라우터 컴포넌트엔 라우터의 용도로만 쓰는게 재사용에 좋다.

axios를 이용한 api 호출

HTTP API 를 쉽게 다룰수있는 라이브러리 axios를 설치 그 외 설치법은 여기를 참고

axios/axios

npm i axios --save

vue 2.2.0 버전 이상부터 필수로 key를 입력하게 되었다.

즉 여기서는 동그라미의 v-bind를 넣어야한다.

밑출친 코드 처럼 this를 대입하는 방식으로 간접적으로 쓰는 이유는
지금의 this문법이 현재 작성된 코드(호출을 한 후에)를 보고 있지 않기 때문이다.

import axios from "axios";

// 1. HTTP Request & Response와 관련된 기번 설정
const config = {
  baseUrl: "https://api.hnpwa.com/v0/",
};

// API 함수들을 정리
function fetchNewsList() {
  //   return axios.get(config.baseUrl + "news/1.json");
  return axios.get(`${config.baseUrl}news/1.json`);
}
function fetchJobsList() {
  //   return axios.get(config.baseUrl + "news/1.json");
  return axios.get(`${config.baseUrl}jobs/1.json`);
}
function fetchAskList() {
  //   return axios.get(config.baseUrl + "news/1.json");
  return axios.get(`${config.baseUrl}ask/1.json`);
}

export { fetchNewsList, fetchJobsList, fetchAskList };

ES6 템플릿 리터럴과 import , export 모듈을 이용해 API 주소를 간략하게 쓸 수 있다.

src / views / NewsView.vue

<template>
  <div>
    <div v-for="user in users" v-bind:key="user.id">{{ user.title }}</div>
  </div>
</template>

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

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    let vm = this;
    newsList()
      .then(function(response) {
        console.log(response);
        vm.users = response.data;
      })
      .catch(function(error) {
        console.log(error);
      });
  },
};
</script>

<style></style>

import할 때 as 구문을 이용하면 {fetchNewsList as newsList} 처럼 newsList로 줄여 쓸 수 있다.
나머지 jobsView.vue, AskView.vue도 비슷하게 코드가 구성된다.

화살표 함수의 this

// ES5 이전의 간접적인 this 문법

created() {
    let vm = this;
    newsList()
      .then(function(response) {
        vm.users = response.data;
      })
      .catch(function(error) {
        console.log(error);
      });
  },
};

// ES6 이후의 this 문법

created() {
    newsList()
      .then((response) => {
        this.users = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
  },

this 문법을 변수로 대입하는 방식으로 쓰지않고 싶다면 ES6의 화살표함수를 쓰는 것이다.
화살표함수가 호출 전의 this 속성를 then()함수안으로 가져오게한다.
화살표 함수를 써야하는 가장 강력한 이유다.

자바스크립트 비동기 처리(1) - 콜백 함수

자바스크립트 비동기 처리와 콜백 함수

자바스크립트 비동기 처리(2) - Promise

자바스크립트 Promise 쉽게 이해하기

Promise - JavaScript | MDN