title: 使用 useLazyAsyncData 提升數據載入體驗 date: 2024/7/19 updated: 2024/7/19 author: cmdragon excerpt: 摘要：本文介紹useLazyAsyncData函數在Nuxt 3中的使用，以提升數據載入體驗。此函數支持異 ...
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
- 非同步載入
- 數據獲取
- 前端開發
- 組件優化
- 用戶體驗
掃描二維碼關註或者微信搜一搜：編程智域 前端至全棧交流與成長
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
