使用 useLazyFetch 進行非同步資料獲取

Amd794發表於2024-07-20
非同步

title: 使用 useLazyFetch 進行非同步資料獲取
date: 2024/7/20
updated: 2024/7/20
author: cmdragon

excerpt:
摘要：“使用 useLazyFetch 進行非同步資料獲取”介紹了在Nuxt開發中利用useLazyFetch進行非同步資料載入的方法，強調其立即觸發導航特性，與useFetch相似的使用方式，以及如何處理資料狀態和錯誤，透過示例展示如何在模板中根據資料載入狀態顯示不同內容。

categories:

  • 前端開發

tags:

  • Nuxt
  • 非同步
  • 資料
  • 載入
  • 框架
  • 前端
  • 程式設計

image
image

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

在 nuxt 開發中，我們經常需要進行非同步資料獲取。useLazyFetch是一個對useFetch的封裝，它提供了一種在處理程式解析之前觸發導航的方式。

一、useLazyFetch 的特點**

  1. 立即觸發導航：預設情況下，useFetch在非同步處理程式解析之前會阻止導航。而useLazyFetch透過將lazy選項設定為true
    ，可以在處理程式解析之前觸發導航。

  2. 與useFetch相同的簽名：useLazyFetch具有與useFetch相同的簽名，這使得它易於使用和理解。

  3. 像下面這樣呼叫useLazyFetch來獲取資料：

const { pending, data: posts } = await useLazyFetch('/api/posts')

pending表示資料獲取的狀態（是否正在載入），posts則儲存獲取到的資料。

二、使用步驟

  1. 呼叫useLazyFetch：使用useLazyFetch來獲取資料，並將獲取到的資料儲存在變數中。
  2. 處理待處理和錯誤狀態：透過pending變數來檢查資料是否正在載入，透過error變數來處理可能出現的錯誤。
  3. 監視資料變化：使用watch函式來監視資料的變化，並在資料載入完成後進行相應的操作。
  4. 在模板中使用資料：根據pending的值來顯示載入中的提示，或者在資料載入完成後顯示資料。

三、示例程式碼

處理待處理和錯誤狀態：

<template>
  <div v-if="pending">
    載入中...
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- 對每個 post 進行相關操作 -->
    </div>
  </div>
</template>

透過上述模板程式碼，根據pending的值來顯示不同的內容。當pending為true時，顯示“載入中...”，否則顯示獲取到的資料。

監視資料變化：

watch(posts, (newPosts) => {
  // 當 posts 資料發生變化時執行的操作
})

四、注意事項

  1. useLazyFetch是編譯器轉換的保留函式名，因此你不應該將自己的函式命名為useLazyFetch。
  2. 在使用useLazyFetch時，需要根據你的專案實際情況來替換useFetch。
  3. 要確保提供的 API 路徑（如上述示例中的/api/posts）是正確有效的。
  4. 在處理資料時，需要注意資料可能為空的情況，避免出現異常。

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

往期文章歸檔：

  • 使用 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

相關文章