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

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

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

在構建現代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