【Vue.js】非同期データの取得と表示｜AxiosでAPIからJSONを読み込む基本パターン

# プロジェクトを作る（Vite ベースの公式ツール）
npm create vue@latest

# Axios を追加する
npm install axios

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const posts = ref([])
const loading = ref(true)      // 最初から「読み込み中」にしておく
const error = ref('')

onMounted(async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts')
    posts.value = response.data.slice(0, 10)     // JSON は response.data に入る
  } catch (e) {
    error.value = '取得に失敗しました'
  } finally {
    loading.value = false                         // 成功しても失敗しても、読み込みは終わり
  }
})
</script>

<template>
  <p v-if="loading">読み込み中…</p>
  <p v-else-if="error">エラー：{{ error }}</p>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

// api/client.js：共通の設定をまとめた Axios のインスタンス
import axios from 'axios'

export const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',   // 毎回書かなくてよくなる
  timeout: 10000                                     // 10秒で諦める（既定はタイムアウトなし）
})

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import axios from 'axios'
import { api } from './api/client'

const posts = ref([])
const loading = ref(true)
const error = ref('')

// エラーの種類に応じて、メッセージを変える
function toMessage(e) {
  if (e.response) {
    // サーバーが応答したが、エラーのステータスだった
    return `サーバーがエラーを返しました（${e.response.status}）`
  }
  if (e.request) {
    // リクエストは出したが、応答がなかった（ネットワーク断、タイムアウト、CORS など）
    return '通信できませんでした。ネットワークを確認してください。'
  }
  // リクエストを作る前の、設定のミスなど
  return `リクエストに失敗しました：${e.message}`
}

let controller = null

onMounted(async () => {
  controller = new AbortController()
  try {
    const response = await api.get('/posts', { signal: controller.signal })
    posts.value = response.data.slice(0, 10)
  } catch (e) {
    if (axios.isCancel(e)) return      // 自分で中止した場合は、エラー扱いにしない
    error.value = toMessage(e)
  } finally {
    loading.value = false
  }
})

// 画面を離れるときは、取得中のリクエストを中止する
onBeforeUnmount(() => controller?.abort())
</script>

<template>
  <p v-if="loading">読み込み中…</p>
  <p v-else-if="error" role="alert">{{ error }}</p>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>