DAY16: 使用 $fetch 進行數據請求

什麼是 $fetch？

Nuxt 使用 ofetch 來全局公開 $fetch 助手，用於在您的 Vue 應用程序或 API 路由中進行 HTTP 請求。它是在 Nuxt 中進行數據獲取的首選方法。

SSR 中的 $fetch

在服務器端渲染期間，調用 $fetch 以獲取內部 API 路由將直接調用相關的函數（模擬請求），省去了額外的 API 調用。這使得數據在服務器端被獲取並傳輸到客戶端。

然而，在組件中使用 $fetch 而不使用 useAsyncData 包裝它將導致數據被獲取兩次：首先在服務器上，然後在客戶端在hydration期間再次獲取，因為 $fetch 不將狀態從服務器傳輸到客戶端。因此，數據將在兩個地方執行，因為客戶端需要再次獲取數據。

避免雙重數據獲取

為了避免在組件中獲取數據時發生雙重數據獲取，建議使用 useFetch 或 useAsyncData + $fetch。這樣可以確保數據僅在服務器上獲取一次，然後在hydration期間傳輸到客戶端。

範例

<script setup lang="ts">
// 在服務器端渲染時，數據會被獲取兩次
const dataTwice = await $fetch('/api/item')

// 在服務器端渲染時，數據僅在服務器端獲取一次，然後在hydration期間傳輸到客戶端
const { data } = await useAsyncData('item', () => $fetch('/api/item'))

// 您也可以使用 useFetch 作為 useAsyncData + $fetch 的捷徑
const { data } = await useFetch('/api/item')
</script>

最佳實踐

• $fetch 是 Nuxt 中進行 HTTP 調用的首選方法，特別是對於僅在客戶端執行的方法。
• 當需要在組件中進行 HTTP 請求時，請使用 $fetch。

這是關於使用 $fetch 進行數據請求的解釋和示例。當您想要在您的 Nuxt.js 應用程序中進行 HTTP 請求時，$fetch 是一個方便的工具。讓我們通過以下方式來解釋它：

假設您有一個 API 端點 /api/item，您希望從該端點獲取數據。

首先，我們來看看使用 $fetch 的情況：

<script setup lang="ts">
// 在服務器端渲染時，數據會被獲取兩次
const dataTwice = await $fetch('/api/item')
</script>

在上述情況下，當在服務器端渲染時，數據會被獲取兩次，這是因為 $fetch 不會將數據狀態從服務器傳輸到客戶端，所以客戶端需要再次獲取數據。

為了避免這種雙重數據獲取，建議使用 useFetch 或 useAsyncData + $fetch，這樣數據只會在服務器端獲取一次，然後在hydration期間傳輸到客戶端：

<script setup lang="ts">
// 在服務器端渲染時，數據僅在服務器端獲取一次，然後在hydration期間傳輸到客戶端
const { data } = await useAsyncData('item', () => $fetch('/api/item'))

// 您也可以使用 useFetch 作為 useAsyncData + $fetch 的捷徑
const { data } = await useFetch('/api/item')
</script>

這樣，您可以確保數據在服務器端僅被獲取一次，並在hydration期間傳輸到客戶端。