使用 useLazyAsyncData 提升資料載入體驗

Amd794發表於2024-07-19

title: 使用 useLazyAsyncData 提升資料載入體驗
date: 2024/7/19
updated: 2024/7/19
author: cmdragon

excerpt:
摘要：本文介紹useLazyAsyncData函式在Nuxt 3中的使用，以提升資料載入體驗。此函式支援非同步獲取資料並在元件中處理掛起與錯誤狀態，透過pending、error和data屬性實現動態載入反饋。示例展示瞭如何建立Nuxt 3專案並利用該函式獲取計數器資料，包括前端程式碼實現及簡易後端模擬。

categories:

  • 前端開發

tags:

  • Nuxt 3
  • useLazyAsyncData
  • 非同步載入
  • 資料獲取
  • 前端開發
  • 元件最佳化
  • 使用者體驗

image

image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

useLazyAsyncData是一個非常有用的內建函式，它允許我們在元件中非同步獲取資料，並在資料載入過程中處理掛起和錯誤狀態。

什麼是 useLazyAsyncData？

useLazyAsyncData是 Nuxt 3 中用於非同步獲取資料的內建函式。它允許你在元件的setup
函式中非同步獲取資料，並在資料載入過程中處理掛起和錯誤狀態。這個函式返回一個物件，其中包含pending
（表示資料是否正在載入）、error（表示是否有錯誤發生）和data（表示獲取到的資料）等屬性。

  • pending：這是一個布林值，用於指示資料是否正在載入中。當pending為true時，表示資料獲取仍在進行；當pending為false
    時，表示資料載入已完成或尚未開始。
  • error：如果在資料獲取過程中發生錯誤，error物件將包含有關錯誤的詳細資訊，例如錯誤訊息和錯誤型別。
  • data：成功獲取到的資料將儲存在data屬性中。

示例：獲取計數器資料

在這個示例中，我們將使用useLazyAsyncData來獲取一個簡單的計數器資料，並在頁面上顯示。

1. 建立 Nuxt 3 專案

首先，你需要建立一個 Nuxt 3 專案。你可以使用以下命令來建立專案：

npx nuxi@latest init my-nuxt-app
cd my-nuxt-app

2. 建立頁面

在pages目錄下建立一個名為index.vue的檔案，並新增以下內容：

<template>
  <div>
    <!-- 使用 v-if 和 v-else 指令來處理掛起和錯誤狀態 -->
    <div v-if="pending">載入中...</div>
    <div v-else-if="error">載入失敗：{{ error.message }}</div>
    <div v-else>{{ count }}</div>
  </div>
</template>

<script setup>

// 使用 useLazyAsyncData 獲取資料
const { pending, error, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'));

// 監聽 count 的變化
watch(count, (newCount) => {
  console.log('計數器值變化:', newCount);
});
</script>

假設我們有一個後端 API 提供計數器資料。您可以使用任何後端語言和框架來實現這個 API，例如使用 Node.js 和 Express 框架：

const express = require('express');
const app = express();

app.get('/api/count', (req, res) => {
  // 模擬隨機的計數器值
  const count = Math.floor(Math.random() * 100);
  res.send({ count });
});

app.listen(3001, () => {
  console.log('伺服器在 3001 埠執行');
});

3. 執行專案

在終端中執行以下命令來啟動開發伺服器：

npm run dev

4. 檢視效果

開啟瀏覽器並訪問http://localhost:3000，你應該會看到以下內容：

  • 如果資料正在載入，頁面將顯示“載入中...”。
  • 如果資料載入失敗，頁面將顯示錯誤資訊。
  • 如果資料載入成功，頁面將顯示計數器的值。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：使用 useLazyAsyncData 提升資料載入體驗 | cmdragon's Blog

往期文章歸檔：

  • Nuxt.js 中使用 useHydration 實現資料水合與同步 | cmdragon's Blog
  • useHeadSafe：安全生成HTML頭部元素 | cmdragon's Blog
  • Nuxt.js頭部魔法：輕鬆自定義頁面元資訊，提升使用者體驗 | cmdragon's Blog
  • 探索Nuxt.js的useFetch：高效資料獲取與處理指南 | cmdragon's Blog
  • Nuxt.js 錯誤偵探：useError 組合函式 | cmdragon's Blog
  • useCookie函式：管理SSR環境下的Cookie | cmdragon's Blog
  • 輕鬆掌握useAsyncData獲取非同步資料 | cmdragon's Blog
  • 使用 useAppConfig ：輕鬆管理應用配置 | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（五） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（四） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（三） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（二） | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（一） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（十一） | cmdragon's Blog

相關文章