uniapp Vue3 Axios封装指南
在现代前端开发中，进行 API 请求是不可避免的，尤其是在使用 Vue 3 和 uniapp 开发移动端应用时，使用 Axios 去处理网络请求将会让你的工作更加高效和便利。本文将系统地教你如何对 Axios 进行封装，适应 uniapp 和 Vue3 的使用需求。
流程概览
以下是将 Axios 封装为可重用模块的步骤。我们将通过表格形式展示这个流程。
| 步骤 | 描述 |
|---|---|
| 1 | 安装 Axios |
| 2 | 创建 Axios 实例 |
| 3 | 封装请求方法 |
| 4 | 设置请求和响应拦截器 |
| 5 | 在组件中使用封装的 Axios |
接下来，我们会逐步详细讲解每一步的具体操作和代码实现。
步骤详解
1. 安装 Axios
首先，确保你的项目中已经安装了 Axios。在你的项目根目录打开终端，运行以下命令：
npm install axios
2. 创建 Axios 实例
在你的项目中创建一个新的文件夹 src/utils，在这个文件夹中创建一个 axiosInstance.js 文件。这个文件将用于创建和配置 Axios 实例。
// src/utils/axiosInstance.js
import axios from 'axios';
// 创建一个 Axios 实例
const axiosInstance = axios.create({
baseURL: ' // 设置基础 URL
timeout: 5000, // 请求超时时间
headers: {
'Content-Type': 'application/json', // 设置请求头
},
});
// 导出 Axios 实例
export default axiosInstance;
这段代码创建了一个 Axios 实例，设定了基础 URL、超时时间和请求头信息，以便后续使用。
3. 封装请求方法
接下来，我们要在 src/utils 文件夹中创建一个文件 api.js，用于封装不同的请求方法。
// src/utils/api.js
import axiosInstance from './axiosInstance';
// 封装 GET 请求方法
export const getRequest = (url, params) => {
return axiosInstance.get(url, { params })
.then(response => response.data) // 提取响应数据
.catch(error => {
console.error('GET请求失败:', error);
throw error;
});
};
// 封装 POST 请求方法
export const postRequest = (url, data) => {
return axiosInstance.post(url, data)
.then(response => response.data) // 提取响应数据
.catch(error => {
console.error('POST请求失败:', error);
throw error;
});
};
上面的 api.js 文件中，我们定义了 getRequest 和 postRequest 两个封装好的请求方法。它们都能处理请求失败的情况，并输出错误信息。
4. 设置请求和响应拦截器
为了增强我们的请求处理逻辑，可以在 axiosInstance.js 文件中添加请求和响应拦截器。
// 在 src/utils/axiosInstance.js 中继续完善代码
// 请求拦截器
axiosInstance.interceptors.request.use(
config => {
// 可以在这里添加 token 逻辑等
console.log('请求发送:', config);
return config;
},
error => Promise.reject(error)
);
// 响应拦截器
axiosInstance.interceptors.response.use(
response => {
// 在这里可以对响应进行处理
console.log('响应接收:', response);
return response;
},
error => Promise.reject(error)
);
这里，我们添加了请求和响应的拦截器，可以在请求发送之前添加一些逻辑，例如添加 token，同时也能在响应时进行统一的处理。
5. 在组件中使用封装的 Axios
最后，我们在 Vue 组件中使用刚才封装好的 Axios 实例。在你的组件中，可以这样导入并使用：
<template>
<view>
<text>{{ data }}</text>
</view>
</template>
<script>
import { getRequest } from '@/utils/api';
export default {
data() {
return {
data: null,
};
},
mounted() {
this.fetchData();
},
methods: {
async fetchData() {
try {
// 使用封装的 GET 请求
this.data = await getRequest('/path/to/endpoint');
} catch (error) {
console.error('获取数据失败:', error);
}
},
},
};
</script>
在这个示例中，我们通过 getRequest 方法在组件的 mounted 钩子中获取数据，处理了 API 请求的结果，并将结果渲染到模板中。
总结
经过以上几个步骤，我们成功地将 Axios 封装为可重用的模块，能够在 uniapp 和 Vue3 项目中灵活地使用。这样的封装方式使得你的代码更清晰、可维护性更高。
为总结本文的主要内容，在我们的 Axios 模块中，提供了基本的 GET 和 POST 请求封装，同时支持请求和响应的拦截。有了这些，接下来你就可以开始你的项目，把你的业务逻辑放在这些网络请求之中。
以上就是关于 uniapp Vue3 Axios 封装的完整流程和实现方式。希望这篇文章能帮助你更好地进行网络请求的封装与使用。如果你还有任何问题，欢迎随时提问！
