基础示例

请求拦截

拦截 api/test 接口请求，并响应数据：

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock({
  url: '/api/user',
  body: {
    name: 'Mark',
    age: 18,
  }
})

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock({
  url: '/api/user',
  body: {
    name: 'Mark',
    age: 18,
  }
})

允许请求方法

配置当前接口只允许的请求方法

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock([
  {
    url: '/api/only-get-method',
    method: 'GET',
    body: {
      message: 'Only get request methods are allowed',
    },
  },
  {
    url: '/api/allow-get-and-post',
    method: ['GET', 'POST'],
    body: {
      message: 'Allow get and post request methods',
    },
  },
])

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock([
  {
    url: '/api/only-get-method',
    method: 'GET',
    body: {
      message: 'Only get request methods are allowed',
    },
  },
  {
    url: '/api/allow-get-and-post',
    method: ['GET', 'POST'],
    body: {
      message: 'Allow get and post request methods',
    },
  },
])

响应状态

配置当前接口的响应状态码和响应状态文本

一般来说，只需要显式的指定状态码，插件内部会根据状态码设置对应的状态文本

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock({
  url: '/api/fail',
  status: 404,
})

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock({
  url: '/api/fail',
  status: 404,
})

开启/关闭 mock

针对某一个 mock 请求配置，关闭使其被忽略。

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock({
  url: '/api/test',
  enabled: false
})

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock({
  url: '/api/test',
  enabled: false
})

enabled 设置为 false 后，发起的 /api/text 请求不再经过 mock-server，而是经过原来的 server.proxy 配置的代理转发。

动态路径匹配

import { defineMock } from 'vite-plugin-mock-dev-server'

const authorMap: Record<string, any> = {
  10001: { id: '10001', name: 'Mark', age: 20 },
  10002: { id: '10001', name: 'John', age: 21 },
}

export default defineMock({
  url: '/api/author/:id',
  body(request) {
    const id = request.params.id as string
    if (id && authorMap[id]) {
      return {
        code: 200,
        message: 'success',
        result: authorMap[id],
      }
    } else {
      return {
        code: 400,
        message: 'author not found',
      }
    }
  },
})

import { defineMock } from 'vite-plugin-mock-dev-server'

const authorMap: Record<string, any> = {
  10001: { id: '10001', name: 'Mark', age: 20 },
  10002: { id: '10001', name: 'John', age: 21 },
}

export default defineMock({
  url: '/api/author/:id',
  body(request) {
    const id = request.params.id as string
    if (id && authorMap[id]) {
      return {
        code: 200,
        message: 'success',
        result: authorMap[id],
      }
    } else {
      return {
        code: 400,
        message: 'author not found',
      }
    }
  },
})

响应延迟

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock([
  {
    url: '/api/delay',
    delay: 6000,
    body: {
      message: 'delay 6 seconds.',
    },
  },
  {
    // delay 6 seconds. but request fail
    url: '/api/delay-and-fail',
    status: 504,
    delay: 6000,
  },
])

import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock([
  {
    url: '/api/delay',
    delay: 6000,
    body: {
      message: 'delay 6 seconds.',
    },
  },
  {
    // delay 6 seconds. but request fail
    url: '/api/delay-and-fail',
    status: 504,
    delay: 6000,
  },
])

基础示例 ​

请求拦截 ​

允许请求方法 ​

响应状态 ​

开启/关闭 mock ​

动态路径匹配 ​

响应延迟 ​