VueUse 助力高效 API 请求：一场深入解析
大家好！今天我们来深入探讨如何利用 VueUse 这个强大的工具库来优化我们的 API 请求流程。 VueUse 提供了大量实用的 Composition API 工具函数，其中一些可以显著简化我们的数据获取、状态管理以及错误处理，让我们的 Vue 应用更加健壮和高效。
VueUse 的核心优势
在使用 VueUse 进行 API 请求之前，我们需要了解它的核心优势。 VueUse 旨在解决 Vue 开发中的常见痛点，它具有以下几个关键特点：
- 响应式： VueUse 的工具函数基于 Vue 的响应式系统，能够自动追踪依赖关系，并在数据变化时触发更新。
- Composition API 友好： VueUse 完美融入 Vue 3 的 Composition API，使得代码更易于组织、复用和测试。
- 开箱即用： VueUse 提供了大量经过精心设计的工具函数，可以直接使用，无需重复造轮子。
- 可定制性： VueUse 提供了灵活的配置选项，可以根据项目的具体需求进行定制。
- 模块化： VueUse 采用模块化设计，可以只引入需要的工具函数，避免引入不必要的代码。
准备工作：安装 VueUse
首先，我们需要安装 VueUse。打开终端，进入你的 Vue 项目目录，执行以下命令：
npm install @vueuse/core
# 或者
yarn add @vueuse/core
# 或者
pnpm add @vueuse/core安装完成后，就可以在你的 Vue 组件中引入 VueUse 的工具函数了。
使用 useFetch 发起 API 请求
useFetch 是 VueUse 中一个非常强大的工具函数，它可以简化 API 请求的流程，并提供丰富的功能，包括自动重试、数据缓存、错误处理等等。
基本用法：
<template>
<div>
<p v-if="data">Data: {{ data }}</p>
<p v-if="error">Error: {{ error.message }}</p>
<p v-if="pending">Loading...</p>
</div>
</template>
<script setup>
import { useFetch } from '@vueuse/core'
import { ref } from 'vue';
const apiUrl = ref('https://jsonplaceholder.typicode.com/todos/1');
const { data, error, pending } = useFetch(apiUrl)
.get()
.json();
</script>在这个例子中，我们使用 useFetch 发起了一个 GET 请求，请求的 URL 是 https://jsonplaceholder.typicode.com/todos/1。 useFetch 返回一个对象，包含以下几个属性：
data: 包含请求返回的数据，类型是Ref<any>。error: 包含请求过程中发生的错误，类型是Ref<Error | null>。pending: 表示请求是否正在进行中，类型是Ref<boolean>。
在模板中，我们使用 v-if 指令来根据 data、 error 和 pending 的值来显示不同的内容。
更进一步：处理不同请求方式
useFetch 不仅支持 GET 请求，还支持其他的 HTTP 请求方式，如 POST、PUT、DELETE 等。我们可以通过链式调用的方式来指定请求方式：
<script setup>
import { useFetch } from '@vueuse/core'
import { ref } from 'vue';
const apiUrl = ref('https://jsonplaceholder.typicode.com/posts');
const postData = {
title: 'foo',
body: 'bar',
userId: 1,
};
const { data, error, pending } = useFetch(apiUrl)
.post(postData)
.json();
</script>在这个例子中，我们使用 post 方法发起了一个 POST 请求，并将 postData 作为请求体发送到服务器。 post 方法会自动将 postData 序列化为 JSON 格式。
自定义请求头
useFetch 允许我们自定义请求头。我们可以通过 headers 选项来设置请求头：
<script setup>
import { useFetch } from '@vueuse/core'
import { ref } from 'vue';
const apiUrl = ref('https://jsonplaceholder.typicode.com/todos/1');
const { data, error, pending } = useFetch(apiUrl, {
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer your-token'
}
})
.get()
.json();
</script>在这个例子中，我们设置了 Content-Type 和 Authorization 两个请求头。
处理响应数据
useFetch 提供了多种方式来处理响应数据。我们可以使用 json() 方法将响应数据解析为 JSON 格式，也可以使用 text() 方法将响应数据解析为文本格式。
<script setup>
import { useFetch } from '@vueuse/core'
import { ref } from 'vue';
const apiUrl = ref('https://jsonplaceholder.typicode.com/todos/1');
const { data, error, pending } = useFetch(apiUrl)
.get()
.text(); // 将响应数据解析为文本格式
</script>如果我们需要自定义响应数据的处理方式，可以使用 then() 方法：
<script setup>
import { useFetch } from '@vueuse/core'
import { ref } from 'vue';
const apiUrl = ref('https://jsonplaceholder.typicode.com/todos/1');
const { data, error, pending } = useFetch(apiUrl)
.get()
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
});
</script>在这个例子中，我们使用 then() 方法来检查响应状态码，如果状态码不是 200，则抛出一个错误。
处理错误
useFetch 会自动捕获请求过程中发生的错误，并将错误信息存储在 error 属性中。我们可以在模板中使用 v-if 指令来显示错误信息。
<template>
<div>
<p v-if="data">Data: {{ data }}</p>
<p v-if="error">Error: {{ error.message }}</p>
<p v-if="pending">Loading...</p>
</div>
</template>
<script setup>
import { useFetch } from '@vueuse/core'
import { ref } from 'vue';
const apiUrl = ref('https://invalid-url'); // 故意使用一个无效的URL
const { data, error, pending } = useFetch(apiUrl)
.get()
.json();
</script>在这个例子中，我们故意使用了一个无效的 URL，useFetch 会捕获到错误，并将错误信息存储在 error 属性中。
自动重试
useFetch 提供了自动重试的功能。我们可以通过 retry 选项来设置重试次数：
<script setup>
import { useFetch } from '@vueuse/core'
import { ref } from 'vue';
const apiUrl = ref('https://jsonplaceholder.typicode.com/todos/1');
const { data, error, pending } = useFetch(apiUrl, {
retry: 3 // 重试 3 次
})
.get()
.json();
</script>在这个例子中，如果请求失败，useFetch 会自动重试 3 次。
数据缓存
useFetch 提供了数据缓存的功能。我们可以通过 cache 选项来启用数据缓存：
<script setup>
import { useFetch } from '@vueuse/core'
import { ref } from 'vue';
const apiUrl = ref('https://jsonplaceholder.typicode.com/todos/1');
const { data, error, pending } = useFetch(apiUrl, {
cache: true // 启用数据缓存
})
.get()
.json();
</script>在这个例子中，如果数据已经被缓存，useFetch 会直接从缓存中读取数据，而不会发起新的请求。
响应式 URL
useFetch 允许我们使用响应式的 URL。这意味着我们可以根据组件的状态来动态地改变请求的 URL。
<template>
<div>
<input type="text" v-model="userId">
<p v-if="data">Data: {{ data }}</p>
<p v-if="error">Error: {{ error.message }}</p>
<p v-if="pending">Loading...</p>
</div>
</template>
<script setup>
import { useFetch } from '@vueuse/core'
import { ref } from 'vue';
const userId = ref(1);
const apiUrl = computed(() => `https://jsonplaceholder.typicode.com/todos/${userId.value}`);
const { data, error, pending } = useFetch(apiUrl)
.get()
.json();
</script>在这个例子中，我们使用 computed 函数来创建一个响应式的 URL，URL 的值取决于 userId 的值。当 userId 的值发生变化时，apiUrl 的值也会自动更新，useFetch 也会自动发起新的请求。
AbortController 支持
useFetch 集成了 AbortController，允许我们取消正在进行的请求。这在用户快速切换页面或组件卸载时非常有用，可以避免不必要的资源浪费。
<script setup>
import { useFetch } from '@vueuse/core'
import { ref, onBeforeUnmount } from 'vue';
const apiUrl = ref('https://jsonplaceholder.typicode.com/todos/1');
const controller = new AbortController();
const { data, error, pending } = useFetch(apiUrl, {
signal: controller.signal
})
.get()
.json();
onBeforeUnmount(() => {
controller.abort(); // 在组件卸载前取消请求
});
</script>在这个例子中，我们创建了一个 AbortController 实例，并将它的 signal 属性传递给 useFetch。在组件卸载前，我们调用 controller.abort() 方法来取消请求。
useAxios：基于 Axios 的请求
虽然 useFetch 非常强大，但有时候我们可能需要使用其他的 HTTP 客户端，比如 Axios。 VueUse 也提供了 useAxios 工具函数，它可以让我们使用 Axios 发起 API 请求。
首先，我们需要安装 Axios：
npm install axios
# 或者
yarn add axios
# 或者
pnpm add axios然后，我们可以使用 useAxios 来发起 API 请求：
<template>
<div>
<p v-if="data">Data: {{ data }}</p>
<p v-if="error">Error: {{ error.message }}</p>
<p v-if="pending">Loading...</p>
</div>
</template>
<script setup>
import { useAxios } from '@vueuse/integrations/useAxios'
import axios from 'axios';
import { ref } from 'vue';
const apiUrl = ref('https://jsonplaceholder.typicode.com/todos/1');
const { data, error, pending } = useAxios(apiUrl, {
method: 'GET'
}, axios);
</script>在这个例子中，我们首先引入了 useAxios 和 axios。然后，我们使用 useAxios 发起了一个 GET 请求，请求的 URL 是 https://jsonplaceholder.typicode.com/todos/1。 useAxios 的第三个参数是 Axios 实例。
useAxios 的使用方式与 useFetch 非常相似，也提供了 data、 error 和 pending 属性。
useAsyncState：异步状态管理
useAsyncState 是 VueUse 中另一个非常有用的工具函数，它可以用来管理异步操作的状态。与 useFetch 相比，useAsyncState 更加通用，可以用于任何类型的异步操作，而不仅仅是 API 请求。
基本用法：
<template>
<div>
<p v-if="state">Data: {{ state }}</p>
<p v-if="error">Error: {{ error.message }}</p>
<p v-if="loading">Loading...</p>
<button @click="execute">Fetch Data</button>
</div>
</template>
<script setup>
import { useAsyncState } from '@vueuse/core'
import { ref } from 'vue';
const fetchData = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
if (!response.ok) {
throw new Error('Network response was not ok');
}
return await response.json();
};
const { state, loading, error, execute } = useAsyncState(
fetchData,
null, // 初始值
{
onError(e) {
console.error("Error during async operation:", e);
},
immediate: false // 设置为false，避免组件初始化时自动执行。
}
);
</script>在这个例子中，我们定义了一个 fetchData 函数，用于发起 API 请求。然后，我们使用 useAsyncState 来管理 fetchData 的状态。 useAsyncState 返回一个对象，包含以下几个属性：
state: 包含异步操作的结果，类型是Ref<any>。loading: 表示异步操作是否正在进行中，类型是Ref<boolean>。error: 包含异步操作过程中发生的错误，类型是Ref<Error | null>。execute: 一个函数，用于手动执行异步操作。
在模板中，我们使用 v-if 指令来根据 state、 error 和 loading 的值来显示不同的内容。 我们还添加了一个按钮，用于手动触发 fetchData 函数的执行。
自定义初始值
useAsyncState 允许我们自定义初始值。我们可以通过第二个参数来设置初始值：
<script setup>
import { useAsyncState } from '@vueuse/core'
import { ref } from 'vue';
const fetchData = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
if (!response.ok) {
throw new Error('Network response was not ok');
}
return await response.json();
};
const { state, loading, error, execute } = useAsyncState(
fetchData,
{ title: 'Initial Title', completed: false }, // 自定义初始值
{ immediate: false }
);
</script>在这个例子中，我们设置了初始值为 { title: 'Initial Title', completed: false }。
立即执行
默认情况下，useAsyncState 会在组件初始化时立即执行异步操作。我们可以通过 immediate 选项来禁用立即执行：
<script setup>
import { useAsyncState } from '@vueuse/core'
import { ref } from 'vue';
const fetchData = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
if (!response.ok) {
throw new Error('Network response was not ok');
}
return await response.json();
};
const { state, loading, error, execute } = useAsyncState(
fetchData,
null,
{ immediate: false } // 禁用立即执行
);
</script>在这个例子中，我们禁用了立即执行，需要手动调用 execute 函数来执行异步操作。
错误处理
useAsyncState 会自动捕获异步操作过程中发生的错误，并将错误信息存储在 error 属性中。我们还可以通过 onError 选项来自定义错误处理逻辑：
<script setup>
import { useAsyncState } from '@vueuse/core'
import { ref } from 'vue';
const fetchData = async () => {
const response = await fetch('https://invalid-url'); // 故意使用一个无效的URL
if (!response.ok) {
throw new Error('Network response was not ok');
}
return await response.json();
};
const { state, loading, error, execute } = useAsyncState(
fetchData,
null,
{
onError(e) {
console.error('Error fetching data:', e);
// 可以进行更复杂的错误处理，例如发送错误报告
},
immediate: false
}
);
</script>在这个例子中，我们使用 onError 选项来定义错误处理逻辑。
最佳实践与注意事项
- 错误边界： 考虑使用 Vue 3 的
Suspense和Error Boundaries来优雅地处理组件级别的错误。 - 数据转换： 在
useFetch的then方法中进行数据转换，避免在模板中进行复杂的计算。 - 类型安全： 尽量使用 TypeScript 来增强代码的类型安全。
- 代码分割： 对于大型项目，可以考虑使用代码分割来优化加载性能。
- 节流和防抖： 在处理用户输入相关的 API 请求时，可以使用
useDebounceFn和useThrottleFn来避免频繁请求。
总结： VueUse 让 API 请求更简单
通过今天的讲解，我们了解了如何利用 VueUse 这个强大的工具库来优化 API 请求流程。 useFetch 和 useAsyncState 提供了简洁而强大的 API，可以帮助我们更高效地管理数据获取、状态管理以及错误处理。 在实际项目中，我们可以根据具体的需求选择合适的工具函数，并结合最佳实践，来构建更加健壮和高效的 Vue 应用。 使用 VueUse 可以减少重复代码，提高开发效率，并改善代码的可读性和可维护性。