輕鬆掌握useAsyncData獲取非同步資料

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

title: 輕鬆掌握useAsyncData獲取非同步資料
date: 2024/7/12
updated: 2024/7/12
author: cmdragon

excerpt:
摘要：本文詳細介紹Nuxt.js中的useAsyncData組合式函式，它用於在服務端渲染(SSR)過程中非同步獲取資料，確保客戶端正確水合，避免重複請求。內容包括基本概念、引數說明（key, handler, options）、示例用法、如何監聽引數變化自動重新整理資料及返回值詳解，展示了在頁面元件中使用useAsyncData的具體方式和注意事項。

categories:

  • 前端開發

tags:

  • Nuxt.js
  • 非同步資料
  • SSR
  • 元件函式
  • 資料獲取
  • 響應式物件
  • 服務端渲染

image

image

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

在Nuxt.js中，useAsyncData是一個非常有用的組合式函式，它允許我們在服務端渲染（SSR）的過程中非同步獲取資料，同時確保這些資料能夠在客戶端正確地水合（hydrate），避免了不必要的重複請求。

基本概念

useAsyncData是一個組合式函式，它可以在 Nuxt
應用中的頁面、元件或外掛中使用。這個函式接受一個唯一的鍵和一個非同步函式，非同步函式的返回值將作為資料來源。useAsyncData
返回一個響應式物件，其中包含了資料、載入狀態、錯誤資訊以及一個重新整理資料的函式。

引數說明

  1. key:

    • 型別：string
    • 說明：一個用於唯一標識非同步資料請求的鍵。如果未提供，useAsyncData會自動生成一個基於檔名和行號的鍵。

  2. handler:

    • 型別：() => Promise<any>或() => any

    說明：一個非同步函式，它返回一個Promise物件，該Promise物件在解析時提供資料。這個函式是必須的，並且其返回值不能是undefined
    或null，否則可能會導致請求重複。

  3. options:

    • 型別：Partial<AsyncDataOptions>

    • 說明：這是一個可選的物件，可以包含以下屬性：

      • server:

        • 型別：boolean
        • 說明：預設為true，表示資料將在伺服器端獲取。

      • lazy:

        • 型別：boolean
        • 說明：預設為false，表示資料將在路由載入時立即獲取。如果設定為true，資料將在路由導航後非同步獲取，不會阻塞導航。

      • immediate:

        • 型別：boolean
        • 說明：預設為true，表示在路由載入時立即觸發資料獲取。如果設定為false，資料獲取將被延遲，直到首次訪問該路由。

      • default:

        • 型別：(data: any) => any
        • 說明：一個工廠函式，用於在非同步資料解析之前設定data的預設值。這在lazy: true或immediate: false時非常有用。

      • transform:

        • 型別：(data: any) => any
        • 說明：一個函式，用於在解析handler函式的結果後修改資料。

      • pick:

        • 型別：(data: any) => any
        • 說明：一個函式，用於從handler函式的結果中挑選特定的鍵。

      • watch:

        • 型別：(data: any) => any
        • 說明：一個函式，用於監聽響應式源，並在其變化時自動重新整理資料。

      • deep:

        • 型別：boolean
        • 說明：預設為true，表示返回深層響應式物件。如果設定為false，則返回淺層響應式物件，這可能在某些情況下提高效能。

示例用法

以下是在pages/index.vue頁面中使用useAsyncData的示例：


<template>
    <div>
        <div v-if="pending">載入中...</div>
        <div v-else-if="error">錯誤：{{ error.message }}</div>
        <div v-else>
            <ul>
                <li v-for="mountain in data" :key="mountain.id">{{ mountain.name }}</li>
            </ul>
        </div>
    </div>
</template>

<script setup>
    // 使用 useAsyncData 獲取資料
    const {data, pending, error, refresh} = await useAsyncData(
            'mountains', // 唯一鍵，用於確保資料獲取的正確性
            () => $fetch('https://api.nuxtjs.dev/mountains') // 非同步函式，返回資料
    )
</script>

引數解釋

  1. key：一個字串，用於標識這個資料請求的唯一鍵。在同一個元件中，如果有多個useAsyncData呼叫，每個鍵都應該是唯一的。
  2. handler：一個非同步函式，它應該返回一個Promise，該Promise在解析時提供所需的資料。

返回值

  • data：一個響應式引用，包含非同步函式解析後的資料。
  • pending：一個布林值，表示資料是否正在載入。
  • error：一個響應式引用，如果資料載入失敗，它將包含一個錯誤物件。
  • refresh：一個函式，可以用來重新執行非同步函式，從而重新整理資料。

注意事項

  • 確保useAsyncData的鍵在整個應用中是唯一的，以避免資料衝突。
  • 如果你的資料請求依賴於元件的響應式狀態，可以使用watch選項來自動重新獲取資料。

監聽引數

useAsyncData
組合式函式確實允許你監聽外部變數的變化，並在這些變數發生變化時重新執行非同步資料獲取器。下面是如何在pages/index.vue
中使用watch選項來監聽page變數的變化，並相應地更新資料的一個示例。

示例程式碼

<template>
  <div>
    <div v-if="pending">載入中...</div>
    <div v-else-if="error">錯誤：{{ error.message }}</div>
    <div v-else>
      <ul>
        <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
      </ul>
      <!-- 假設有一個分頁元件或按鈕來改變頁碼 -->
      <button @click="page.value++">下一頁</button>
    </div>
  </div>
</template>

<script setup>
    // 建立一個響應式引用來儲存當前頁碼
    const page = ref(1)

    // 使用 useAsyncData 獲取資料，並監聽 page 變數的變化
    const { data: posts, pending, error, refresh } = await useAsyncData(
      'posts',
      () => $fetch('https://fakeApi.com/posts', {
        params: {
          page: page.value // 將當前頁碼作為引數傳遞給 API
        }
      }),
      {
        watch: [page] // 監聽 page 變數的變化
      }
    )
</script>

解釋

  1. 響應式引用page：我們使用ref建立了一個響應式引用page，用來儲存當前頁碼。
  2. useAsyncData獲取資料：我們使用useAsyncData來獲取資料，並將page作為引數傳遞給
    API。同時，我們傳遞了一個包含watch選項的物件，其中指定了要監聽的響應式引用page。
  3. 監聽page變化：當page的值發生變化時，useAsyncData會自動重新執行獲取器函式，並使用新的頁碼值來獲取資料。
  4. 返回資料：最後，我們將page、posts、pending、error和refresh函式返回到模板中，以便在模板中訪問和使用這些資料。

返回值

1. data

data屬性包含非同步函式返回的結果。在請求完成之前，它可能是undefined。

const { data } = useAsyncData('key', async () => {
  const response = await fetch('/api/data');
  return await response.json();
});

// 在模板中使用 data
<div>{{ data ? data.someProperty : '載入中...' }}</div>

2. pending

3. refresh/execute

4. error

5. status

完整示例

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：輕鬆掌握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
  • Nuxt3 的生命週期和鉤子函式（十） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（九） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（八） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（七） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（六） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（五） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（四） | cmdragon's Blog

相關文章