vue3项目之indexedDB 搭配 Mock 接口（二）

实现 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);
}