logo cmdragon's Blog

探索Nuxt.js的useFetch：高效数据获取与处理指南

avatar
cmdragon 渡劫
  2024-07-15 00:00:00   2024-07-15 00:00:00   2.8k 字  11 分钟
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来获取文章列表：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

使用拦截器

拦截器允许开发者在请求和响应阶段进行自定义操作，如设置请求头、处理请求错误、存储令牌等：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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的示例，展示了如何使用这些参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 对象中返回，这可以在不需要深层响应式数据时提高性能。

示例代码

以下是一个使用useAsyncData的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
async function fetchData() {
  const { data, pending, error } = await useAsyncData('uniqueKey', () =>
    $fetch('https://api.example.com/data', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    }),
    {
      server: true,
      lazy: false,
      immediate: true,
      default: () => ({ message: 'Loading...' }),
      transform: (原始数据) => {
        // 对数据进行转换
        return {
          ...原始数据,
          modifiedData: 'Modified'
        };
      },
      pick: ['id', 'name'],
      watch: ['query'],
      deep: false
    }
  );

  // 处理数据
  if (!pending && !error) {
    console.log(data.value);
  }
}

在这个例子中，我们使用useAsyncData来获取数据，并设置了一些选项来控制数据获取的行为。我们定义了一个唯一的键uniqueKey
，设置了默认值，并指定了数据转换和选择的字段。我们还设置了watch选项来监听特定的响应式源。

返回值

useFetch是 Nuxt 3
中用于处理异步数据加载的一个组合式函数，它返回一个对象，其中包含了异步数据操作的相关信息。以下是useFetch返回值的详细解释：

1. data

  • 类型：any
  • 描述：传入的异步函数（handler）的结果。当异步操作成功完成时，这个值将包含异步函数返回的数据。

2. pending

  • 类型：boolean
  • 描述：一个布尔值，指示数据是否仍在获取中。当数据正在加载时，这个值将为true
    ；当数据加载完成时，无论成功或失败，这个值都将变为false。

3. refresh/execute

  • 类型：function
  • 描述：一个可以用于刷新 handler 函数返回的数据的函数。调用这个函数将重新执行 handler 函数，并更新data和pending状态。

4. error

  • 类型：Error或null
  • 描述：如果数据获取失败，则为错误对象。如果数据获取成功，这个值将为null。

5. status

  • 类型：string

  • 描述：表示数据请求的状态的字符串，可以是以下之一：

    • "idle"：没有数据请求正在进行。
    • "pending"：数据请求正在进行中。
    • "success"：数据请求成功完成。
    • "error"：数据请求失败。

默认行为

  • Nuxt 等待 refresh 完成：默认情况下，Nuxt 会等待refresh完成后才能再次执行。这意味着如果你尝试再次调用refresh
    ，它将不会重新执行 handler 函数，直到之前的refresh完成并返回新数据。
  • server: false 时的行为：如果您没有在服务器上获取数据（例如，通过设置server: false
    ），那么直到组件融合（hydration）完成之前，数据将不会被获取。这意味着即使在客户端上等待useFetch，data也会保持为null。

示例代码

以下是如何使用useFetch返回值的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script setup>

const { data, pending, error, status, refresh } = useFetch('key', () =>
  fetch('https://api.example.com/data').then(response => response.json())
);

watch(pending, (isPending) => {
  if (isPending) {
    console.log('数据正在加载...');
  } else {
    if (error.value) {
      console.error('数据加载失败:', error.value);
    } else {
      console.log('数据加载成功:', data.value);
    }
  }
});

// 刷新数据
refresh();
</script>

在这个例子中，我们使用useFetch来获取数据，并通过watch来监听数据加载的状态。我们还展示了如何调用refresh函数来重新加载数据。

往期文章归档：

探索Nuxt.js的useFetch：高效数据获取与处理指南
posts/b4311c856080/
作者
cmdragon
发布于
2024-07-15 00:00
许可
  1. 1. useFetch的使用场景
    1. 1.1. 示例：获取文章列表
      1. 1.1.1. 使用useFetch获取动态参数
      2. 1.1.2. 使用拦截器
  2. 2. 参数
    1. 2.1. 1. URL
    2. 2.2. 2. Options
      1. 2.2.1. 示例代码
      2. 2.2.2. 注意事项
  3. 3. useAsyncData 参数详解
    1. 3.1. 1. key
    2. 3.2. 2. server
    3. 3.3. 3. lazy
    4. 3.4. 4. immediate
    5. 3.5. 5. default
    6. 3.6. 6. transform
    7. 3.7. 7. pick
    8. 3.8. 8. watch
    9. 3.9. 9. deep
    10. 3.10. 示例代码
  4. 4. 返回值
    1. 4.1. 1. data
    2. 4.2. 2. pending
    3. 4.3. 3. refresh/execute
    4. 4.4. 4. error
    5. 4.5. 5. status
    6. 4.6. 默认行为
    7. 4.7. 示例代码
  5. 5. 往期文章归档：
  1. 1. useFetch的使用场景
    1. 1.1. 示例：获取文章列表
      1. 1.1.1. 使用useFetch获取动态参数
      2. 1.1.2. 使用拦截器
  2. 2. 参数
    1. 2.1. 1. URL
    2. 2.2. 2. Options
      1. 2.2.1. 示例代码
      2. 2.2.2. 注意事项
  3. 3. useAsyncData 参数详解
    1. 3.1. 1. key
    2. 3.2. 2. server
    3. 3.3. 3. lazy
    4. 3.4. 4. immediate
    5. 3.5. 5. default
    6. 3.6. 6. transform
    7. 3.7. 7. pick
    8. 3.8. 8. watch
    9. 3.9. 9. deep
    10. 3.10. 示例代码
  4. 4. 返回值
    1. 4.1. 1. data
    2. 4.2. 2. pending
    3. 4.3. 3. refresh/execute
    4. 4.4. 4. error
    5. 4.5. 5. status
    6. 4.6. 默认行为
    7. 4.7. 示例代码
  5. 5. 往期文章归档：