使用 $fetch 進行 HTTP 請求

Amd794發表於2024-08-02
HTTP

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

image
image

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

在 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: 'john@example.com'},
    });
    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

相關文章