Vue Nuxt 3 使用useFetch從API獲取資料

本篇介紹Vue Nuxt 3的useFetch。

useFetch用來從後端API獲取資料。

事前要求

參考「Vue Nuxt 3 動態路由 Dynamic Route」中修改的pages/home/export/index.vue。

修改pages/home/export/index.vue

原本訂單列表資料是寫死在程式中，下面改用useFetch從後端API/api/orders取得。useFetch預設使用GET。

pages/home/export/index.vue

<template>
  <div>
    <h1>出口業務</h1>
    <ul v-if="orders && orders.length">
      <li v-for="order in orders" :key="order.id">
        <NuxtLink :to="`/home/export/${order.id}`">
          訂單 #{{ order.id }}
        </NuxtLink>
      </li>
    </ul>

    <p v-else>沒有訂單資料</p>
  </div>
</template>

<script setup>
const { data: orders } = await useFetch('/api/orders', {
  default: () => [], // 預設值為空陣列
})
</script>

useFetch返回一個Promise，加上await確保請求完成後才賦值給變數。或使用pending來顯示載入中；使用error處理錯誤。

不過目前並沒有後端API/api/orders，所以下面在Nuxt server建立一個模擬的API。

建立模擬API

在Nuxt專案的server目錄下新增api/orders.get.js，用來模擬從後端取得訂單資料。Nuxt會將server/api目錄中的檔案自動轉換為API端點，例如api/orders.get.js會對應到API端點[GET] /api/orders；api/orders.post.js會對應到API端點[POST] /api/orders。

server/api/orders.get.js

export default defineEventHandler(() => {
  return [
    { id: 10001 },
    { id: 10002 },
    { id: 10003 },
  ]
})

defineEventHandler函式返回的值即為API的回應資料。

github

修改完後[出口業務]頁面中的訂單列表即從模擬API取得的資料。

接著參考「Vue Nuxt 3 useFetch 查詢參數」在API請求中帶入查詢參數。