Axios로 API 연동 및 비동기 처리하기 - Vue 기본기 다지기 7편

API Integration and Async Operations with Axios - Vue Basics Part 7

npm install axios

import axios from 'axios';
 
// Axios 인스턴스를 생성합니다.
const api = axios.create({
  // API 요청의 기본 주소를 설정합니다.
  // 모든 요청 앞에 이 주소가 붙게 됩니다.
  baseURL: 'https://jsonplaceholder.typicode.com'
});
 
export default api;

<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api'; // 우리가 만든 Axios 인스턴스를 가져옵니다.
 
const posts = ref([]);
 
// onMounted 훅에 비동기 함수를 전달합니다.
onMounted(async () => {
  try {
    // 컴포넌트가 마운트되면 API를 호출하여 게시물 목록을 가져옵니다.
    const response = await api.get('/posts?_limit=10'); // 10개만 가져오기
    posts.value = response.data; // 응답 데이터를 posts 상태에 저장합니다.
  } catch (error) {
    console.error('데이터를 가져오는 중 에러 발생:', error);
  }
});
</script>
 
<template>
  <div>
    <h1>게시물 목록</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api';
 
const posts = ref([]);
const isLoading = ref(false); // 로딩 상태를 관리할 ref
const error = ref(null);      // 에러 상태를 관리할 ref
 
onMounted(async () => {
  isLoading.value = true; // API 호출 시작 전에 로딩 상태를 true로 설정
  error.value = null;
 
  try {
    // try 블록 안에서 API를 호출합니다.
    const response = await api.get('/posts?_limit=10');
    posts.value = response.data;
  } catch (err) {
    // catch 블록에서 에러를 처리합니다.
    console.error('데이터를 가져오는 중 에러 발생:', err);
    error.value = '데이터를 불러올 수 없습니다. 잠시 후 다시 시도해주세요.';
  } finally {
    // finally 블록은 성공/실패 여부와 관계없이 항상 실행됩니다.
    isLoading.value = false; // API 호출이 끝나면 로딩 상태를 false로 설정
  }
});
</script>
 
<template>
  <div>
    <h1>게시물 목록</h1>
    <div v-if="isLoading">
      로딩 중입니다...
    </div>
    <div v-else-if="error">
      <p style="color: red;">{{ error }}</p>
    </div>
    <ul v-else>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>