前后端分离的开发模式，前端需要向后端请求数据（ajax请求），但实际开发过程中，前后端会约定一份接口文档，但前后端开发进度并不一致，当后端没有完善接口功能时，前端需要在本地模拟数据返回，此时需要使用到mockjs。
安装mock
npm install mockjs --save-dev
创建mock文件夹
mock下创建index.ts、types.ts 以及你需要使用到的模块的.ts文件。
mock文件夹
inde.ts文件代码：
import Mock from 'mockjs'
import { MockParams } from './types'
import api from './api'
// 需要遍历的请求
const mocks = [...api]
// 设置200-2000毫秒延时请求数据
Mock.setup({
timeout: '200-2000'
})
// 接口拦截
export function mockRequest() {
let i: MockParams
for (i of mocks) {
Mock.mock(new RegExp(i.url), i.type || 'get', i.response)
}
}
types.ts文件代码：
// 定义参数类型
export interface MockParams {
url: string
type: string
data?: any
params?: any
response(option?: any): Record<string, unknown>
}
api.ts文件代码：
const tokens = {
admin: {
password: 123456,
token: 'admin-token'
},
editor: {
password: 123456,
token: 'editor-token'
}
}
// get请求从config.url获取参数，post从config.body中获取参数
function paramObj(url) {
const search = url.split('?')[1]
if (!search) {
return {}
}
return JSON.parse(
'{"' +
decodeURIComponent(search)
.replace(/"/g, '\\"')
.replace(/&/g, '","')
.replace(/=/g, '":"') +
'"}'
)
}
const api = [
// 登陆接口
{
url: '/user/login',
type: 'get',
response: (config) => {
const { username } = paramObj(config.url)
const token = tokens[username].token
if (token) {
return {
code: 0,
message: '操作成功',
data: {
token: token
}
}
}
return {
code: 1,
message: '用户信息错误，请重试~',
data: {}
}
}
}
]
export default api
最后在main.ts引入
if (process.env.NODE_ENV === 'development') {
const { mockRequest } = require('../mock')
mockRequest()
}
在shims-vue.d.ts中添加声明
declare module 'mockjs'
