详解vue3结合ts项目中使用mockjs

npm install mockjs --save-dev

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)
  }
}

// 定义参数类型
export interface MockParams {
  url: string
  type: string
  data?: any
  params?: any
  response(option?: any): Record<string, unknown>
}

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

/**
 * 测试环境下 引入自定义的mockRequest
 * 因为mockRequest不是默认导出的：export default{}
 * 所以引入时需要加大括号，这种可以引入多个
 */
if (process.env.NODE_ENV === 'development') {
  const { mockRequest } = require('../mock')
  mockRequest()
}

declare module 'mockjs'