title: 使用 $fetch 進行 HTTP 請求 date: 2024/8/2 updated: 2024/8/2 author: cmdragon excerpt: 摘要：文章介紹了Nuxt3中使用\(fetch進行HTTP請求的方法，它是基於ofetch庫，支持SSR和自動緩存。\)fet ...
title: 使用 $fetch 進行 HTTP 請求
date: 2024/8/2
updated: 2024/8/2
author: cmdragon
excerpt:
摘要：文章介紹了Nuxt3中使用\(fetch進行HTTP請求的方法，它是基於ofetch庫，支持SSR和自動緩存。\)fetch簡化了HTTP請求，支持GET、POST等，可結合useAsyncData或useFetch優化數據獲取，避免重覆請求，適用於伺服器端渲染。
categories:
- 前端開發
tags:
- Nuxt3
- $fetch
- HTTP
- SSR
- 緩存
- Vue
- API
掃描二維碼關註或者微信搜一搜：編程智域 前端至全棧交流與成長
在 Nuxt3 中，$fetch 是一個強大的工具，用於在 Vue 應用程式和 API 路由中進行 HTTP 請求。它基於 ofetch 庫，併在 Nuxt
中提供了一些增強功能，如支持伺服器端渲染（SSR）和自動緩存。
什麼是 $fetch？
$fetch 是 Nuxt3 中全局暴露的一個輔助函數，用於進行 HTTP 請求。它允許您在 Vue 組件和 API 路由中輕鬆地發送 GET、POST
等請求，並處理響應。與傳統的 axios 或 fetch 相比，$fetch 提供了更好的集成和優化，特別是在處理伺服器端渲染（SSR）時。
為什麼使用 $fetch？
1. 簡化 HTTP 請求
$fetch 提供了簡潔的 API，使得發起 HTTP 請求和處理響應變得更簡單。您可以輕鬆地在 Vue 組件中獲取數據或發送請求，而不需要手動管理請求和響應邏輯。
2. 支持伺服器端渲染（SSR）
在 Nuxt3 中使用 $fetch 時，如果在伺服器端渲染期間調用，它將直接模擬請求，避免了額外的 API 調用。這樣可以提高性能並減少不必要的網路請求。
3. 避免重覆數據獲取
當在組件中使用 $fetch 時，若不結合 useAsyncData 或 useFetch
使用，可能會導致數據在伺服器端和客戶端兩次獲取。為了防止這種情況，推薦使用 useAsyncData 或 useFetch
來確保數據只在伺服器端獲取，併在客戶端進行優化處理。
如何使用 $fetch？
基本用法
$fetch 可以用來發送各種類型的 HTTP 請求。以下是一些常見的示例：
示例 1: 發送 GET 請求
<template>
<div>
<p>數據：{{ data }}</p>
</div>
</template>
<script setup lang="ts">
const data = await $fetch('/api/data');
</script>
在這個示例中，我們使用 $fetch 發送了一個 GET 請求到 /api/data，並將響應數據綁定到組件中的 data 變數。
示例 2: 發送 POST 請求
<template>
<button @click="submitForm">提交</button>
</template>
<script setup lang="ts">
async function submitForm() {
const response = await $fetch('/api/submit', {
method: 'POST',
body: {name: 'John Doe', email: '[email protected]'},
});
console.log(response);
}
</script>
在這個示例中，我們定義了一個 submitForm 函數，它會發送一個 POST 請求到 /api/submit，並傳遞一個 JSON 對象作為請求體。
結合 useAsyncData 和 useFetch
為了優化數據獲取，並避免在伺服器端和客戶端兩次請求相同的數據，推薦使用 useAsyncData 或 useFetch。
示例 3: 使用 useAsyncData
<template>
<div>
<p>數據：{{ data }}</p>
</div>
</template>
<script setup lang="ts">
const {data} = await useAsyncData('item', () => $fetch('/api/item'));
</script>
在這個示例中，我們使用 useAsyncData 來獲取數據。這將確保數據僅在伺服器端獲取一次，並將其傳遞到客戶端，避免了重覆獲取。
示例 4: 使用 useFetch
<template>
<div>
<p>數據：{{ data }}</p>
</div>
</template>
<script setup lang="ts">
const {data} = await useFetch('/api/item');
</script>
useFetch 是 useAsyncData 和 $fetch 的快捷方式，提供了類似的功能，但更為簡潔。
使用 $fetch 僅在客戶端執行
有時候，您可能只希望在客戶端執行某些 HTTP 請求。例如，在用戶點擊按鈕時發送請求：
<template>
<button @click="contactForm">聯繫我們</button>
</template>
<script setup lang="ts">
async function contactForm() {
const response = await $fetch('/api/contact', {
method: 'POST',
body: {message: 'Hello from the client!'},
});
console.log(response);
}
</script>
在這個示例中，contactForm 函數僅在客戶端觸發，通過點擊按鈕發送一個 POST 請求。
參數說明
- url: 請求的 URL 地址。
- options: 可選的請求選項，如
method、body、headers等。
總結
$fetch 是 Nuxt3 中進行 HTTP 請求的推薦方式，它提供了簡潔的 API，並支持伺服器端渲染（SSR）。通過結合使用 useAsyncData
或 useFetch，您可以優化數據獲取流程，避免重覆請求。希望這篇教程能夠幫助您更好地理解和使用 $fetch。
餘下文章內容請點擊跳轉至 個人博客頁面 或者 掃碼關註或者微信搜一搜：編程智域 前端至全棧交流與成長，閱讀完整的文章：使用 $fetch 進行 HTTP 請求 | cmdragon's Blog
往期文章歸檔：
- 使用 useState 管理響應式狀態 | cmdragon's Blog
- 使用 useServerSeoMeta 優化您的網站 SEO | cmdragon's Blog
- 使用 useSeoMeta 進行 SEO 配置 | cmdragon's Blog
- Nuxt.js必讀：輕鬆掌握運行時配置與 useRuntimeConfig | cmdragon's Blog
- Nuxt.js 路由管理：useRouter 方法與路由中間件應用 | cmdragon's Blog
- useRoute 函數的詳細介紹與使用示例 | cmdragon's Blog
- 使用 useRequestURL 組合函數訪問請求URL | cmdragon's Blog
- Nuxt.js 環境變數配置與使用 | cmdragon's Blog
- 服務端渲染中的數據獲取：結合 useRequestHeaders 與 useFetch | cmdragon's Blog
- 使用 useRequestEvent Hook 訪問請求事件 | cmdragon's Blog
- 使用 useNuxtData 進行高效的數據獲取與管理 | cmdragon's Blog
- Nuxt 3 使用指南：掌握 useNuxtApp 和運行時上下文 | cmdragon's Blog
- 使用 useLazyFetch 進行非同步數據獲取 | cmdragon's Blog
- 使用 useLazyAsyncData 提升數據載入體驗 | cmdragon's Blog
- Nuxt.js 中使用 useHydration 實現數據水合與同步 | cmdragon's Blog
- useHeadSafe：安全生成HTML頭部元素 | cmdragon's Blog
- Nuxt.js頭部魔法：輕鬆自定義頁面元信息，提升用戶體驗 | cmdragon's Blog
