使用mockjs拦截ajax请求模拟后端接口

971 阅读1分钟

依赖安装

npm i mockjs

使用

编写MockServer.ts

// MockServer.ts

// @ts-ignore
import Mock from 'mockjs'

// 如果需要模拟延迟,可以通过如下方式设置
// Mock.setup({
//   timeout: '200-600' // 表示响应时间介于 200 和 600 毫秒之间,默认值是'10-100'。
// })
// Mock.setup({
//   timeout: 400
// })

// 返回goods的接口
Mock.mock('/get', Mock.mock({
  'string|1-10': '★'
}))

Mock.mock('/user/login', 'post', (mockReq:any) => {
  // 这个mockReq实际可以获取到request body参数
  console.log('mockReq', mockReq)
  return {
    code: 100,
    mock: true,
    mockReq: mockReq,
    data: { name: 'mock-js' }
  }
})

在发起ajax请求之前,先引入一次MockServer.ts即可, 此时ajax请求就会被自动拦截了

相关参考

mockjs 官方使用示例

mockjs setup说明

mock.js中ajax模拟可以用延时么?