詳解vue3結合ts項目中使用mockjs

更新時間：2023年07月05日 14:44:59 作者：黑蘿卜不黑

這篇文章主要為大家介紹了vue3結合ts項目中使用mockjs示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前后端分離的開發(fā)模式

前端需要向后端請求數(shù)據(jù)（ajax請求），但實際開發(fā)過程中，前后端會約定一份接口文檔，但前后端開發(fā)進度并不一致，當后端沒有完善接口功能時，前端需要在本地模擬數(shù)據(jù)返回，此時需要使用到mockjs。

安裝mock

npm install mockjs --save-dev

創(chuàng)建mock文件夾

mock下創(chuàng)建index.ts、types.ts 以及你需要使用到的模塊的.ts文件。

inde.ts文件代碼

import Mock from 'mockjs'
import { MockParams } from './types'
import api from './api'
// 需要遍歷的請求
const mocks = [...api]
// 設置200-2000毫秒延時請求數(shù)據(jù)
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文件代碼

// 定義參數(shù)類型
export interface MockParams {
  url: string
  type: string
  data?: any
  params?: any
  response(option?: any): Record&lt;string, unknown&gt;
}

api.ts文件代碼

const tokens = {
  admin: {
    password: 123456,
    token: 'admin-token'
  },
  editor: {
    password: 123456,
    token: 'editor-token'
  }
}
// get請求從config.url獲取參數(shù)，post從config.body中獲取參數(shù)
function paramObj(url) {
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse(
    '{"' +
      decodeURIComponent(search)
        .replace(/"/g, '\\"')
        .replace(/&amp;/g, '","')
        .replace(/=/g, '":"') +
      '"}'
  )
}
const api = [
  // 登陸接口
  {
    url: '/user/login',
    type: 'get',
    response: (config) =&gt; {
      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引入

/**
 * 測試環(huán)境下 引入自定義的mockRequest
 * 因為mockRequest不是默認導出的：export default{}
 * 所以引入時需要加大括號，這種可以引入多個
 */
if (process.env.NODE_ENV === 'development') {
  const { mockRequest } = require('../mock')
  mockRequest()
}

在shims-vue.d.ts中添加聲明