vue에서 axios를 이용하여 서버에서 데이터 가져오기

o:kcalb·2024년 7월 19일

Vue

목록 보기

27/28

https://youtu.be/JAMOiluaUTc?si=5vP0LxOs-P9JkJAw

1. axios 설치

터미널

npm install axios

2. api 폴더와 board.js 생성

3. rest API를 이용하여 게시판 정보를 가져오는 모듈 작성

// board.js

//import를 이용해 axios 모듈 가져오기
import axios from 'axios';

// 서버의 기본주소
const BASE_URL = "https://jsonplaceholder.typicode.com/";

export default {
    getArticle: function(id){
        return axios.get(`${BASE_URL}posts/${id}`);
      	//axios에 get 메소드를 호출한 뒤 결과값을 리턴할 거임.
    }
}

설명❗
서버는 미리 만들어진 서버 사용할 거임.
jsonplaceholder라는 가짜서버 사용
서버의 기본주소는 상수 BASE_URL에 부여함

getArticle: 서버에서 원하는 게시물의 데이터만 가져옴
https://jsonplaceholder.typicode.com/posts/1 은 JSON 형태임
파라미터 id를 이용해서 서버에서 원하는 게시물의 데이터(예: posts/1)만 가져옴

이제 getArticle 을 호출하고 결과값을 확인해 보자!

4. App.vue에서 호출

import 해주기.
화면이 나타나자마자 무엇인가 초기화하기 위해서는 mounted를 사용함.

created: vue 객체가 생성되자마자 실행됨
mounted: 생성된 이후 화면이 표시될 때 생성됨(가상돔에 해당 뷰가 장착되어 템플릿에 태그요소를 사용할 수 잇는 상태를 뜻함)

mounted(){
    apiBoard.getArticle(1)
      .then((response) =>{
      //데이터를 성공적으로 가져왔을 때 실행
        console.log(response)
      }) 

      .catch((e) =>{
      //에러가 났을 때 실행
        console.log(e)
      });
  }

axios는 비동기적으로 동작하기 때문에 호출하자마자 알 수는 없음, 따라서 이런 식으로 이벤트핸들러 형식을 취하고 있음.
.then function의 파라미터: 가져온 데이터를 의미하는 response로 작명

호출 성공!
status가 200이면 성공이란 뜻~~

5. getAricles 메소드 생성

//board.js
getAricles: function(page){
  console.log(page)
  return axios.get(`${BASE_URL}posts`);
}

//app.vue

apiBoard.getAricles(0)
  .then((response) => {
  // 성공 시
    console.log('getAricles', response)
  })
    .catch((e) => {
    // 에러
    console.log(e)
  });

apiBoard.getAricles 실행 시 arrow function을 사용하는 이유:

arrow function의 this는 function과 달리 this를 스스로 정의하지 않고 외부에 있는 것을 사용하기 때문. 따라서 arrow function의 this는 vue객체를 의미하게 됨.

6. 데이터바인딩하기

//app.vue
  data(){// 데이터 보관통
    return {
      article: null,
    }
  },
  mounted(){
    //1초마다 1%씩 감소
    setInterval(() => {
      if(this.disCountNum !== 0){
        this.disCountNum = this.disCountNum - 1;
      }
    }, 100)

    apiBoard.getAricles(0)
      .then((response) => {
      // 성공 시
      console.log('getAricles', response)

      this.article = response.data
    })
      .catch((e) => {
      // 에러
      console.log(e)
    });
  },