探索Mock在vue3项目中的使用

Mock使用场景：当项目前后端同时开发，后端来不及提供接口时，前端可通过mock来模拟后端返回数据，非强制性使用
Mock介绍：
Mock.mock，有几种写法，形式如下所示

Mock.mock( rurl?, rtype?, template|function( options ) )
// rurl 可选,表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'
// rtype 可选,表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等
// template 可选,表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'
// function(options) 可选，表示用于生成响应数据的函数；options，指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性

Mock.setup( settings )

Mock.setup({
    timeout: '200-600'
})
// settings 必选，配置项集合
// timeout 可选，指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒 后才会返回响应内容；也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'

以下是示例部分

Mock安装：npm install mockjs -D
Mock文件目录：

mock文件位置和src文件平级

import "../mock/index.ts"

index.ts内容如下：

import Mock from "mockjs";  // 引入mockjs
import "./api/home.ts";  // 把其他mock文件导入到入口文件
Mock.setup({
    timeout: '300-400'  // 设置相应时间
})

home.ts内容如下：

import Mocks from "mockjs";
const baseUrl = '/ceshi'

const tipList = [
    {
        id: 101,
        tip: "今天吃什么呢",
        content: "饺子",
    },
    {
        id: 102,
        tip: "明天吃什么呢",
        content: "大米饭",
    },
    {
        id: 103
        tip: "后天吃什么呢",
        content: "玉米",
    },
    {
        id: 104,
        tip: "在墓地里面吃什么呢",
        content: "啃土",
    }
];

const article = Mocks.mock(baseUrl + '/api/article', () => {
    return tipList
})

const selectA = Mocks.mock(baseUrl + "/api/selectArticle", (ops: any) => {
    const obj = eval("(" + ops.body + ")")
    const list: any[] = []
    tipList.filter(Item => {
        if (Item.tip.indexOf(obj.val) >= 0) {
            list.push(Item)
        }
    })
    return list
})

const details = Mocks.mock(baseUrl + "/api/getDetail", 'post', {
    "data|1-3": [{
        "id|+1": 1,
        "string|4-7": "",
        "age|33-99": 50,
        "like": "@boolean",
        "number": "@natural(10000)",
        "int": "@integer(33,99)",
        "float": "@float(1,100,2,4)",
        "charatcter": "@character('upper')",
        "string": "@string('symbol',4,7)",
        "random": "@range(2,8,4)",
        "data": "@date('yyyy-MM-dd')",
        "time": "@time('HH:mm:ss')",
        "dateTime": "@datetime('yyyy-MM-dd HH:mm:ss')",
        "now": "@now('year')",
        "image": "@image('100x100','#3388ff','image')",
        "color": "@color",
        "rgb": "@rgb",
        "paragraph": "@paragraph(2)",
        "sentence": "@sentence(5)",
        "word": "@word(100)",
        "title": "@title(4,7)",
        "cparagraph": "@cparagraph(4)",
        "cfirst": "@cfirst",
        "name": "@name",
        "url": "@url",
        "email": "@email",
        "province": "@province",
        "city": "@city",
        "guid": "@guid",
        "uuid": "@id"
    }]
})

export default (router) => {
    return [
        router.get(baseUrl + '/api/article', article),
        router.get(baseUrl + '/api/selectArticle', selectA),
        router.get(baseUrl + '/api/getDetail', details)
    ]
}

封装的简单请求如下

import axios from 'axios'
const service = axios.create({
    baseURL: '/ceshi', 
    withCredentials: false,
    timeout: 60000
})

export default service

页面请求api如下：

import request from '@/utils/request'
export function getArticles() {
    return request({
        url:'/api/article',
        method:'get'
    })
}
export function selectA(val:any) {
    return request({
        url:'/api/selectArticle',
        method:'get',
        data:{
            val
        }
    })
}
export function getDetail(id:any) {
    return request({
        url:'/api/getDetail',
        method:'post',
        data:{
            id
        }
    })
}

注释：当我们请求路径是'/ceshi/api/getDetail',会返回mock设置的内容，返回示例如下：

image.png