輕鬆掌握useAsyncData獲取非同步數據

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

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
組件函數
數據獲取
響應式對象
服務端渲染

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

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

基本概念

useAsyncData是一個組合式函數，它可以在 Nuxt
應用中的頁面、組件或插件中使用。這個函數接受一個唯一的鍵和一個非同步函數，非同步函數的返回值將作為數據源。useAsyncData
返回一個響應式對象，其中包含了數據、載入狀態、錯誤信息以及一個刷新數據的函數。

參數說明

key:
- 類型：string
- 說明：一個用於唯一標識非同步數據請求的鍵。如果未提供，useAsyncData會自動生成一個基於文件名和行號的鍵。
handler:
- 類型：() => Promise<any>或() => any
說明：一個非同步函數，它返回一個Promise對象，該Promise對象在解析時提供數據。這個函數是必須的，並且其返回值不能是undefined
或null，否則可能會導致請求重覆。
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>

參數解釋

key：一個字元串，用於標識這個數據請求的唯一鍵。在同一個組件中，如果有多個useAsyncData調用，每個鍵都應該是唯一的。
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>

解釋

響應式引用page：我們使用ref創建了一個響應式引用page，用來存儲當前頁碼。
useAsyncData獲取數據：我們使用useAsyncData來獲取數據，並將page作為參數傳遞給
API。同時，我們傳遞了一個包含watch選項的對象，其中指定了要監聽的響應式引用page。
監聽page變化：當page的值發生變化時，useAsyncData會自動重新運行獲取器函數，並使用新的頁碼值來獲取數據。
返回數據：最後，我們將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