在Vue 3中，封装一个网络请求工具，可以提高代码的复用性和可维护性。在实际开发中，我们经常需要发送网络请求来获取数据，处理数据并展示到界面上。因此，封装一个通用的请求库是非常有必要的。我们可以使用 axios 库来发送请求，并结合 Vue 3 的组合式 API 来实现封装。
1. 安装 Axios
首先，我们需要安装 axios。可以通过 npm 或 yarn 来完成这个步骤：
npm install axios
或者：
yarn add axios
2. 创建请求工具
在项目的 src 目录下，我们可以创建一个名为 request.js 的文件，用于封装请求逻辑。示例代码如下：
// src/request.js
import axios from 'axios';
// 创建一个 axios 实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置基础 URL
timeout: 10000, // 请求超时设置
});
// 请求拦截器
instance.interceptors.request.use(config => {
// 在发送请求之前做些什么，比如添加 token
const token = localStorage.getItem('token'); // 假设 token 存储在 localStorage 中
if (token) {
config.headers['Authorization'] = `Bearer ${token}`; // 这里设置请求头
}
return config;
}, error => {
return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(response => {
// 对响应数据做点什么
return response.data; // 直接返回数据部分
}, error => {
// 对响应错误做点什么
console.error('请求错误:', error);
return Promise.reject(error);
});
// 封装请求方法
export const get = (url, params = {}) => {
return instance.get(url, { params });
};
export const post = (url, data = {}) => {
return instance.post(url, data);
};
// 其他请求方法，如 PUT、DELETE 可以类似封装
3. 使用封装的请求工具
接下来，我们可以在 Vue 组件中使用封装好的请求工具。以下是一个示例组件：
<template>
<div>
<h1>用户列表</h1>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>
</template>
<script>
import { reactive, onMounted } from 'vue';
import { get } from '@/request';
export default {
setup() {
const state = reactive({
users: [],
});
const fetchUsers = async () => {
try {
const data = await get('/users'); // 请求用户列表
state.users = data; // 更新状态
} catch (error) {
console.error('获取用户失败:', error);
}
};
onMounted(() => {
fetchUsers(); // 组件挂载时请求用户数据
});
return state;
},
};
</script>
<style scoped>
/* 添加样式 */
</style>
4. 错误处理与 Loading 状态
在实际开发中，我们通常还需要处理请求失败的情况，显示加载状态等。可以在组件中使用 ref 和 watch 来处理这些情况。
import { ref } from 'vue';
export default {
setup() {
const users = ref([]);
const loading = ref(false);
const error = ref(null);
const fetchUsers = async () => {
loading.value = true; // 设置加载状态
error.value = null; // 清空错误信息
try {
users.value = await get('/users');
} catch (err) {
error.value = '获取用户失败';
console.error(err);
} finally {
loading.value = false; // 清除加载状态
}
};
// ... 其他代码同上
},
};
总结
通过以上步骤，我们成功地封装了一个简单而实用的请求工具，并在 Vue 3 组件中使用了它。这样不仅提高了代码的可读性和可维护性，还能够帮助我们更高效地处理网络请求及其状态。在实际开发中，可能还需要根据项目的需求进一步扩展这个请求库，比如添加更多的请求处理逻辑、全局的错误处理等。希望这个简单的示例能够帮助你更好地理解如何在 Vue 3 中进行请求封装。
