实现 mock 接口
以下是查询数据库所有数据 mock 接口函数的模板,首先确保有 room
这个对象仓库
而且实现了加载效果,利用 ElLoading
// 引入加载效果
import { ElLoading } from 'element-plus'
// 引入数据库
import { airbnbDB } from '@/db/index';
// mock 接口
export async function fetchMockData() {
// 创建 mock 加载效果
const loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(255, 255, 255, 0.7)',
})
// 再查询所有数据库数据
const result = await airbnDB.getList('room')
// 加载结束
setTimeout(() => { loading.close() }, 1000)
// 返回对象结果
if(result) {
return { code: '200', message: '成功', data: result, ok: true }
} else {
return { code: '204', message: '失败', data: false, ok: false }
}
}
ElLoading
:https://element-plus.gitee.io/zh-CN/component/loading.html
真实/mock 数据对比
在组件中调用两个接口函数,并打印结果
import { reqgetCategoryList, fetchMockData } from '@/api/index'
async function getRealData() {
let result = await reqgetCategoryList();
console.log('真实数据');
console.log(result);
}
async function getMockData() {
let result = await fetchMockData()
console.log('mock数据');
console.log(result);
}