Vue Nuxt 3 useFetch error

本篇介紹Vue Nuxt 3的useFetch回傳值的error屬性。

error是一個物件，當API請求發生錯誤返回值，反之為null，可利用此屬性來顯示錯誤訊息。

事前要求

參考「Vue Nuxt 3 useFetch pending」。

修改server/api/order.get.js

使用throw createError拋出一個錯誤來模擬呼叫/api/orders時發生錯誤。

export default defineEventHandler(() => {
  throw createError({
    statusCode: 500,
    message: '伺服器發生錯誤'
  })
})

修改pages/home/export/index.vue

在useFetch的回傳值中取得error屬性來顯示錯誤訊息。

pages/home/export/index.vue

<template>
  <div>
    <h1>出口業務</h1>

    <p v-if="pending">資料載入中...</p>
    <p v-else-if="error" class="error">資料載入失敗</p>
    <p v-else-if="orders.length === 0">沒有訂單資料</p>
    <ul v-else>
      <li v-for="order in orders" :key="order.id">
        <NuxtLink :to="`/home/export/${order.id}`">
          訂單 #{{ order.id }}
        </NuxtLink>
      </li>
    </ul>

  </div>
</template>

<script setup>
const { data: orders, pending, error } = useFetch('/api/orders', {
  default: () => [],
})
</script>

<style scoped>
.error {
  color: red;
}
</style>

github

API返回錯誤時，error有值，顯示「資料載入失敗」。

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