### Vue 3 中实现
Mock 请求或
使用 Mock.js 进行
数据模拟
在 Vue 3 开发过程中，当后端接口尚未完成时，可以通过 `
Mock.js` 来模拟接口
数据。以下是具体方法：
#### 创建
Mock 文件
创建
一个新的文件命名为 `
mock.js` 并引入 `
Mock.js` 库[^2]。
```javascript
// 引入
mock.js
import
Mock from '
mockjs';
// 模拟 /api/personManage/queryPersonData 接口的
数据结构
Mock.
mock('/api/personManage/queryPersonData', {
"ret": 0,
"data": {
"tableData|5": [
{
"ordNum|+1": 1, // 自动递增属性值
"name": "@cname", //
随机生成中文名字
"birday": "@date", //
随机日期
"sex|1-2": true, //
随机 Boolean 值
"aihao|1": ["篮球", "羽毛球", "足球", "乒乓球"] //
随机数组
中的一个元素
}
]
}
});
// 设置请求延迟时间
Mock.setup({
timeout: '200-600'
});
```
上述代码定义了
一个 `/api/personManage/queryPersonData` 的 GET 请求，并返回
一组随机生成的人员管理
数据。
---
#### 封装 Axios 请求
为了更好地管理和调用 API，在 Vue 3 项目中通常会封装
一个通用的 HTTP 工具类。以下是
一个简单的封装示例[^3]：
```javascript
// axios.js
import axios from 'axios';
import { ElMessage } from 'element-plus'; // 如果需要全局提示消息功能
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API || '', // 默认基础路径
timeout: 5000 // 超时时间
});
// 添加请求拦截器
service.interceptors.request.use(
config => {
return config;
},
error => Promise.reject(error)
);
// 添加响应拦截器
service.interceptors.response.use(
response => {
const res = response.data;
if (res.ret !== undefined && res.ret === 0) {
return res.data; // 返回成功状态下的 data 字段
}
ElMessage.error(res.message || 'Error');
return Promise.reject(new Error(res.message || 'Error'));
},
error => {
ElMessage.error(error.message);
return Promise.reject(error);
}
);
export default service;
```
通过此工具类，可以在不修改业务逻辑的情况下轻松切换真实接口和
Mock 数据。
---
#### 在组件中发起请求
假设我们有
一个 Vue 组件需要
获取模拟
数据，可以直接调用封装好的 Axios 实例发送请求[^4]。
```javascript
<template>
<div v-if="loading">加载中...</div>
<ul v-else>
<li v-for="(item, index) in tableData" :key="index">
{{ item.name }} - {{ item.birday }}
</li>
</ul>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import request from '@/utils/axios';
const loading = ref(true);
const tableData = ref([]);
onMounted(() => {
request.get('/api/personManage/queryPersonData')
.then((response) => {
tableData.value = response.tableData;
})
.finally(() => {
loading.value = false;
});
});
</script>
```
在此示例中，组件会在挂载完成后向 `/api/personManage/queryPersonData` 发起 GET 请求，并展示返回的结果。
---
####
使用 Mock 拦截其他类型的请求
除了 GET 请求外，还可以利用 `
Mock.js` 模拟 POST、PUT 和 DELETE 等操作。例如，模拟新增用户的 POST 请求如下所示[^1]：
```javascript
Mock.
mock('/api/user', 'post', function(options) {
const body = JSON.parse(options.body); //
获取请求体参数
return {
success: true,
message: '用户已成功添加',
user: {
id: Math.ceil(Math.random() * 100),
name: body.name,
age: body.age
}
};
});
```
这样即可覆盖多种场景的需求。
---
扫一扫
6655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
