探索Nuxt.js的useFetch：高效資料獲取與處理指南

Amd794發表於2024-07-15
UXJS

title: 探索Nuxt.js的useFetch：高效資料獲取與處理指南
date: 2024/7/15
updated: 2024/7/15
author: cmdragon

excerpt:
摘要：“探索Nuxt.js的useFetch：高效資料獲取與處理指南”詳述了Nuxt.js中useFetch函式的使用，包括基本用法、動態引數獲取、攔截器使用，及引數詳解。文章透過示例展示瞭如何從API獲取資料，處理動態引數，自定義請求和響應，以及useFetch和useAsyncData的引數選項，幫助開發者掌握非同步資料載入技巧。

categories:

  • 前端開發

tags:

  • Nuxt.js
  • useFetch
  • API
  • 資料
  • 非同步
  • Vue.js
  • SSR

image

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

在構建現代Web應用時，資料獲取是關鍵的一環。Nuxt.js，作為Vue.js的伺服器渲染框架，提供了一系列強大的工具來簡化資料獲取流程。其中，useFetch
可組合函式是用於從API端點獲取資料的高階封裝，旨在與Nuxt的伺服器端渲染（SSR）相容。這個可組合函式提供了一個方便的封裝，包裝了useAsyncData
和$fetch。它根據URL和fetch選項自動生成一個鍵，根據伺服器路由提供請求URL的型別提示，並推斷API響應型別。

useFetch的使用場景

useFetch主要用於在Nuxt應用中從API獲取資料。它提供了一個方便的API，使得開發者能夠以簡潔的方式獲取、處理和更新資料。這個函式可以用於任何需要從外部API獲取資料的場景，如獲取文章列表、使用者資訊、產品資料等。

示例：獲取文章列表

假設我們有一個API端點https://api.example.com/articles，我們可以使用useFetch來獲取文章列表：

<template>
  <div>
    <div v-if="pending">載入中...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else>
      <ul>
        <li v-for="article in articles" :key="article.id">
          {{ article.title }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const { data, pending, error, refresh } = useFetch(`https://api.example.com/articles/${route.params.slug}`);

    onMounted(() => {
      // 重新整理資料以確保獲取最新的文章列表
      refresh();
    });

    return { data, pending, error, refresh };
  },
};
</script>

使用useFetch獲取動態引數

假設API端點需要動態引數，如文章ID：

<script>
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const param1 = ref('value1');
    const { data, pending, error, refresh } = useFetch('https://api.example.com/articles', {
      query: { param1, param2: 'value2' }
    });

    return { data, pending, error, refresh };
  },
};
</script>

使用攔截器

攔截器允許開發者在請求和響應階段進行自定義操作，如設定請求頭、處理請求錯誤、儲存令牌等：

<script>

export default {
  setup() {
    const { data, pending, error, refresh } = useFetch('/api/auth/login', {
      onRequest({ request, options }) {
        options.headers.authorization = 'Bearer ' + localStorage.getItem('token');
      },
      onResponse({ request, response, options }) {
        localStorage.setItem('token', response.data.token);
      }
    });

    return { data, pending, error, refresh };
  },
};
</script>

在Nuxt.js中，useFetch是一個強大的可組合函式，它允許你從不同的API端點非同步獲取資料。以下是對useFetch接收的引數的詳細解釋：

引數

1. URL

  • 型別：string
  • 描述：這是你想要從API獲取資料的URL。它可以是絕對路徑或相對路徑。相對路徑將相對於當前頁面的URL解析。

2. Options

  • 型別：object

  • 描述：這是一個物件，包含了從unjs/ofetch和AsyncDataOptions擴充套件而來的各種選項。以下是一些常見的選項：

    • method：string- 請求方法，如'GET'、'POST'、'PUT'、'DELETE'等。
    • query：object-
      一個物件，其鍵和值將被轉換為查詢字串並附加到URL上。例如，{ param1: 'value1', param2: 'value2' }
      將生成?param1=value1&param2=value2。
    • params：object- 與query類似，也是用於新增查詢引數的物件。params是query的別名。
    • body：any- 請求體，可以是物件、陣列或其他任何可以被轉換為字串的值。如果傳遞的是物件，它將被自動轉換為JSON字串。
    • headers：object- 一個物件，包含了要傳送的HTTP請求頭。
    • baseURL：string- 請求的基本URL，所有請求都將相對於這個URL傳送。

示例程式碼

以下是一個使用useFetch的示例，展示瞭如何使用這些引數：

async function fetchData() {
  const { data, pending, error, refresh } = await useFetch('https://api.example.com/data', {
    method: 'GET',
    query: { userId: 123 },
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer your-token'
    },
    body: {
      key1: 'value1',
      key2: 'value2'
    },
    baseURL: 'https://api.example.com'
  });

  // 處理資料
  if (!pending && !error) {
    console.log(data);
  }
}

在這個例子中，我們向https://api.example.com/data傳送了一個 GET 請求，其中包含查詢引數userId
，請求頭，以及一個請求體。baseURL被設定為'https://api.example.com'，這意味著所有的請求都將相對於這個URL傳送。

注意事項

  • 如果同時提供了query和params，useFetch會將它們視為相同的選項。
  • body中的物件將被自動轉換為JSON字串，除非顯式設定Content-Type請求頭。
  • baseURL是可選的，如果未提供，則使用URL引數中的值。

useAsyncData 引數詳解

useAsyncData是 Nuxt 3 提供的一個用於非同步載入資料的可組合函式。以下是對useAsyncData接收的引數的詳細解釋：

1. key

  • 型別：string或symbol
  • 描述：一個唯一的鍵，用於確保資料獲取可以在請求之間正確去重。如果未提供，useAsyncData將根據使用它的靜態程式碼位置生成一個鍵。

2. server

  • 型別：boolean
  • 描述：是否在伺服器上獲取資料。預設值為true。如果設定為false，則資料只會在客戶端獲取。

3. lazy

  • 型別：boolean
  • 描述：是否在載入路由後解析非同步函式，而不是阻止客戶端導航。預設值為false。如果設定為true，則非同步資料獲取將不會阻塞路由導航。

4. immediate

  • 型別：boolean
  • 描述：如果設定為false，將阻止立即發出請求。預設值為true，意味著非同步函式會在元件初始化時立即執行。

5. default

  • 型別：() => any（工廠函式）
  • 描述：一個工廠函式，用於設定資料的預設值，在非同步函式解析之前使用。通常與lazy: true或immediate: false選項一起使用。

6. transform

  • 型別：(data) => any
  • 描述：在解析後可以用於更改處理函式結果的函式。這個函式接收原始資料作為引數，並返回轉換後的資料。

7. pick

  • 型別：string[]
  • 描述：僅從處理函式結果中選擇指定的鍵。這允許你從響應中提取特定的資料片段。

8. watch

  • 型別：boolean | Array
  • 描述：監聽一組響應式源，並在它們發生變化時自動重新整理獲取的結果。預設情況下，會監聽fetch選項和URL
    。透過設定watch: false，可以完全忽略響應式源。結合immediate: false，可以實現完全手動的資料獲取。

9. deep

  • 型別：boolean
  • 描述：以深層 ref 物件的形式返回資料。預設值為true。如果設定為false，則資料將在淺層 ref 物件中返回，這可以在不需要深層響應式資料時提高效能。

示例程式碼

返回值

1. data

2. pending

3. refresh/execute

4. error

5. status

預設行為

示例程式碼

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：探索Nuxt.js的useFetch：高效資料獲取與處理指南 | cmdragon's Blog

往期文章歸檔：

  • Nuxt.js 錯誤偵探：useError 組合函式 | cmdragon's Blog
  • useCookie函式：管理SSR環境下的Cookie | cmdragon's Blog
  • 輕鬆掌握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

相關文章