Vue Nuxt 3 useFetch pending

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

pending屬性是布林值，當請求未完成時為true，完成後是false，利用此特性來顯示載入狀態。

事前要求

參考「Vue Nuxt 3 使用useFetch從API獲取資料」。

修改server/api/order.get.js

在回傳資料前利用await new Promise加入2秒的等待時間來模擬網路延遲。

server/api/order.get.js

export default defineEventHandler(async () => {
  await new Promise(resolve => setTimeout(resolve, 2000)) // 模擬網路延遲

  return [
    { id: 10001 },
    { id: 10002 },
    { id: 10003 },
  ]
})

修改pages/home/export/index.vue

在useFetch的回傳值中取得pending屬性來顯示載入狀態。

pages/home/export/index.vue

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

    <p v-if="pending">資料載入中...</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 } = useFetch('/api/orders', {
  default: () => [],
})
</script>

github

API返回資料前pending屬性為true，顯示「資料載入中...」；資料返回後pending屬性為false，顯示訂單列表。

接著處理API請求發生錯誤的狀況。