👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。

建立 Server API

在 server/api 目錄下建立一個檔案 ./server/api/about.get.js：

export default defineEventHandler(() => {
  console.log('接收到 API 請求 /api/about')

  return {
    name: 'Ryan',
    gender: '男',
    email: 'ryanchien8125@gmail.com'
  }
})

發送 [GET] 方法的請求，測試網站下的 /api/about 網址路徑。

使用路由首頁

在 pages 目錄下建立一個檔案 ./pages/index.vue：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-gray-800">這裡是首頁</h1>
      <div class="my-8 flex flex-col space-y-2">
        <NuxtLink to="/about/fetch">前往 /about/fetch</NuxtLink>
        <NuxtLink to="/about/useAsyncData">前往 /about/useAsyncData</NuxtLink>
        <NuxtLink to="/about/useFetch">前往 /about/useFetch</NuxtLink>
      </div>
    </div>
  </div>
</template>

修改 app.vue 頁面：

 <template>
   <div>
     <NuxtPage />
   </div>
 </template>

在頁面中使用 $fetch

在 pages/about 目錄下建立一個檔案 ./pages/about/fetch.vue：

<template>
  <div class="my-24 flex flex-col items-center">
    <span class="text-xl text-gray-400">[$fetch]</span>
    <span class="my-2 text-2xl text-gray-600">回傳資料:</span>
    <p class="my-4 text-xl font-semibold text-blue-500">{{ data }}</p>
  </div>
</template>

<script setup>
const data = await $fetch('/api/about')
</script>

在頁面中使用 useAsyncData

在 pages/about 目錄下建立一個檔案 ./pages/about/useAsyncData.vue：

<template>
  <div class="my-24 flex flex-col items-center">
    <span class="text-xl text-gray-400">[useAsyncData]</span>
    <span class="my-2 text-2xl text-gray-600">回傳資料:</span>
    <p class="my-4 text-xl font-semibold text-blue-500">{{ data }}</p>
  </div>
</template>

<script setup>
const { data } = await useAsyncData('about', () => $fetch('/api/about'))
</script>

在頁面中使用 useFetch

在 pages/about 目錄下建立一個檔案 ./pages/about/useFetch.vue：

<template>
  <div class="my-24 flex flex-col items-center">
    <span class="text-xl text-gray-400">[useFetch]</span>
    <span class="my-2 text-2xl text-gray-600">回傳資料:</span>
    <p class="my-4 text-xl font-semibold text-blue-500">{{ data }}</p>
  </div>
</template>

<script setup>
const { datar } = await useFetch('/api/about')
</script>

使用 useFetch 的回傳值，修改 ./pages/about/useFetch.vue 檔案：

<template>
  <div class="my-24 flex flex-col items-center">
    <span class="text-xl text-gray-400">[useFetch]</span>
    <span class="mt-4 text-xl text-sky-500">請求狀態: {{ status }}</span>
    <span v-if="error" class="mt-4 text-xl text-rose-500">發生錯誤: {{ error }}</span>
    <span class="my-2 text-2xl text-gray-600">回傳資料:</span>
    <p v-if="pending" class="my-4 text-xl font-semibold text-blue-500">請求處理中...</p>
    <p v-else class="my-4 text-xl font-semibold text-blue-500">{{ data }}</p>

    <button
      class="mt-6 rounded-md bg-blue-500 px-6 py-3 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2"
      @click="refresh"
    >
      重新獲取資料
    </button>
  </div>
</template>

<script setup>
const { data, pending, refresh, error, status } = await useFetch('/api/about')
</script>

感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

範例程式碼

• Nuxt 3 發送 API 請求

參考資料

• ofetch
• Nuxt Data fetching
• Nuxt useAsyncData
• Nuxt useFetch