⏳ 6-1. async / await の基本

✅ 要点まとめ

• 非同期処理（API 通信、タイマー処理など）を書くときに便利な構文。
• Promise を使ったコードを シンプルに順番通りに書ける。
• async をつけた関数内でしか await は使えない。
• try...catch でエラーハンドリング もできる。
• Composition API でも普通に使える（<script setup> の中でもOK）。

🟢 基本の書き方（具体例）

// ファイル名: fetchData.ts
// API からデータを取得する非同期関数
export async function fetchData(): Promise<string> {
  const response = await fetch('<https://api.example.com/data>');
  if (!response.ok) {
    throw new Error('データ取得失敗');
  }
  const data = await response.json();
  return data.message; // API の戻りが { message: "Hello" } の場合
}

【呼び出し側の例 (Composition API)】

<!-- ファイル名: MyComponent.vue -->
<template>
  <div>
    <p v-if="loading">Loading...</p>
    <p v-else>{{ message }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { fetchData } from './fetchData';

// メッセージとローディング状態を ref で管理
const message = ref<string>('');
const loading = ref(true);

// データ取得関数（非同期）
const loadData = async () => {
  try {
    const result = await fetchData();
    message.value = result;
  } catch (error) {
    console.error('エラー:', error);
    message.value = '取得に失敗しました';
  } finally {
    loading.value = false;
  }
};

// マウント時にデータを取得
onMounted(() => {
  loadData();
});
</script>

🟡 async / await の動作説明

🟣 よくある間違いと注意点