请求验证器

有时候，对于相同的URL，我们需要根据不同的请求参数，返回不同的内容，但又不想通过函数形式的 body 在函数内部处理。在这种情况下可以通过 validator 配置，根据不同的请求参数，返回不同的响应内容

GET请求校验query是否匹配

链接参数中包含该参数即可，无需全匹配。

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

export default defineMock([
  // match /api/post?id=1000
  {
    url: '/api/post',
    validator: {
      query: { id: '1000' },
    },
    body: {
      code: 200,
      message: 'success',
      result: {
        id: '1000',
        title: 'post-1000',
        content: 'post-1000 content',
        author: 'Mark',
      },
    },
  },
  {
    url: '/api/post',
    validator: {
      query: { id: '1001' },
    },
    body: {
      code: 200,
      message: 'success',
      result: {
        id: '1001',
        title: 'post-1001',
        content: 'post-1001 content',
        author: 'John',
      },
    },
  },
  {
    // match query include field `id` and value is 1003
    // like {url: '/api/post', validator: { query: { id: '1003' } }}
    url: '/api/post?id=1003',
    body: {
      code: 200,
      message: 'success',
      result: {
        id: '1003',
        title: 'post-1003',
        content: 'post-1003 content',
        author: 'Joy',
      },
    },
  },
  // Fallback, when the validator does not have a matching result, will use the configuration without validators as the response.
  {
    url: '/api/post',
    body: {
      code: 200,
      message: 'success',
      result: {
        id: 1000 + Math.floor(Math.random() * 1000),
        title: 'random post title',
      },
    },
  },
])

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

export default defineMock([
  // match /api/post?id=1000
  {
    url: '/api/post',
    validator: {
      query: { id: '1000' },
    },
    body: {
      code: 200,
      message: 'success',
      result: {
        id: '1000',
        title: 'post-1000',
        content: 'post-1000 content',
        author: 'Mark',
      },
    },
  },
  {
    url: '/api/post',
    validator: {
      query: { id: '1001' },
    },
    body: {
      code: 200,
      message: 'success',
      result: {
        id: '1001',
        title: 'post-1001',
        content: 'post-1001 content',
        author: 'John',
      },
    },
  },
  {
    // match query include field `id` and value is 1003
    // like {url: '/api/post', validator: { query: { id: '1003' } }}
    url: '/api/post?id=1003',
    body: {
      code: 200,
      message: 'success',
      result: {
        id: '1003',
        title: 'post-1003',
        content: 'post-1003 content',
        author: 'Joy',
      },
    },
  },
  // Fallback, when the validator does not have a matching result, will use the configuration without validators as the response.
  {
    url: '/api/post',
    body: {
      code: 200,
      message: 'success',
      result: {
        id: 1000 + Math.floor(Math.random() * 1000),
        title: 'random post title',
      },
    },
  },
])

POST请求校验body是否匹配

请求body中包含该参数即可，无需全匹配。

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

export default defineMock([
  {
    url: '/api/post-update',
    validator: {
      body: {
        shouldUpdate: true,
      },
    },
    body: {
      code: 200,
      message: 'success',
      result: { updated: true },
    },
  },
  {
    url: '/api/post-update',
    validator: {
      body: {
        shouldUpdate: false,
      },
    },
    body: {
      code: 200,
      message: 'success',
      result: { updated: false },
    },
  },
])

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

export default defineMock([
  {
    url: '/api/post-update',
    validator: {
      body: {
        shouldUpdate: true,
      },
    },
    body: {
      code: 200,
      message: 'success',
      result: { updated: true },
    },
  },
  {
    url: '/api/post-update',
    validator: {
      body: {
        shouldUpdate: false,
      },
    },
    body: {
      code: 200,
      message: 'success',
      result: { updated: false },
    },
  },
])

动态路径校验params是否匹配

校验动态路径中的 params 参数是否匹配

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

export default defineMock([
  // match /api/post/1001
  {
    url: '/api/post/:postId',
    validator: {
      params: { postId: '1001' },
    },
    body: {
      code: 200,
      message: 'success',
      result: {
        id: '1001',
        title: 'post-1001',
        content: 'post-1001 content',
      },
    },
  },
  // match /api/post/1002
  {
    url: '/api/post/:postId',
    validator: {
      params: { postId: '1002' },
    },
    body: {
      code: 200,
      message: 'success',
      result: {
        id: '1002',
        title: 'post-1002',
        content: 'post-1002 content',
      },
    },
  },
])

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

export default defineMock([
  // match /api/post/1001
  {
    url: '/api/post/:postId',
    validator: {
      params: { postId: '1001' },
    },
    body: {
      code: 200,
      message: 'success',
      result: {
        id: '1001',
        title: 'post-1001',
        content: 'post-1001 content',
      },
    },
  },
  // match /api/post/1002
  {
    url: '/api/post/:postId',
    validator: {
      params: { postId: '1002' },
    },
    body: {
      code: 200,
      message: 'success',
      result: {
        id: '1002',
        title: 'post-1002',
        content: 'post-1002 content',
      },
    },
  },
])

校验请求来源地址参数是否匹配

请求来源地址，指的是，发起 mock api 请求的来源地址，可以是指一个在浏览器中打开的页面发起的mock 请求，那么打开的页面即是来源地址。可以是指在一个server请求中发起的 mock api 请求，server请求即是来源地址。

通过来源地址中的 query 参数，来匹配返回的 mock 数据内容

import { defineMock } from 'vite-plugin-mock-dev-server'
import postList from './data/post'

// Different pages send the same interface and can get different
// data through the query parameter of the source page
export default defineMock([
  // localhost/post.html?from=post-page
  // send request /api/post/list
  {
    url: '/api/post/list',
    validator: {
      refererQuery: { from: 'post-page' },
    },
    body: {
      list: postList,
    },
  },
  // localhost/recommend.html?from=recommend-page
  // send request /api/post/list
  {
    url: '/api/post/list',
    validator: {
      refererQuery: { from: 'recommend-page' },
    },
    body: {
      list: postList.slice(0, 4),
    },
  },
])

import { defineMock } from 'vite-plugin-mock-dev-server'
import postList from './data/post'

// Different pages send the same interface and can get different
// data through the query parameter of the source page
export default defineMock([
  // localhost/post.html?from=post-page
  // send request /api/post/list
  {
    url: '/api/post/list',
    validator: {
      refererQuery: { from: 'post-page' },
    },
    body: {
      list: postList,
    },
  },
  // localhost/recommend.html?from=recommend-page
  // send request /api/post/list
  {
    url: '/api/post/list',
    validator: {
      refererQuery: { from: 'recommend-page' },
    },
    body: {
      list: postList.slice(0, 4),
    },
  },
])

函数形式的校验器

有时候仅适用严格匹配的方式校验参数并不能满足需要，那么可以使用函数形式来定义校验器，并返回 boolean 值。

可以更加灵活的校验请求中的各种信息

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

export default defineMock([
  {
    url: '/api/validator-check-cookie',
    validator(request) {
      const token = request.getCookie('token')
      return !token
    },
    body: {
      message: 'token expired.',
    },
  },
  {
    url: '/api/validator-body-include',
    validator(request) {
      const ids = request.body.ids || []
      return !ids.includes('1001')
    },
    body: {
      code: 200,
      message: 'ids must be include 1001',
    },
  },
])

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

export default defineMock([
  {
    url: '/api/validator-check-cookie',
    validator(request) {
      const token = request.getCookie('token')
      return !token
    },
    body: {
      message: 'token expired.',
    },
  },
  {
    url: '/api/validator-body-include',
    validator(request) {
      const ids = request.body.ids || []
      return !ids.includes('1001')
    },
    body: {
      code: 200,
      message: 'ids must be include 1001',
    },
  },
])

深度校验 body 是否匹配

对于请求体 body，其数据结构可能相对复杂，需要深度校验。插件支持判断验证器配置的 body 是否属于请求体 body 的子集。

api.mock.tsfetch.ts

export default defineMock({
  url: '/mock/validator-body',
  validator: {
    body: {
      a: [1, 2], // 数组的项 必须都在 请求体 的 a 中
      b: { c: 1 }
    }
  },
  body: ''
})

export default defineMock({
  url: '/mock/validator-body',
  validator: {
    body: {
      a: [1, 2], // 数组的项 必须都在 请求体 的 a 中
      b: { c: 1 }
    }
  },
  body: ''
})

await fetch('/mock/validator-body', {
  method: 'POST',
  body: JSON.stringify({
    a: [1, 2, 3, 4],
    b: { c: 1, d: 2 },
    c: 1,
  })
})

await fetch('/mock/validator-body', {
  method: 'POST',
  body: JSON.stringify({
    a: [1, 2, 3, 4],
    b: { c: 1, d: 2 },
    c: 1,
  })
})

INFO

不仅验证器中的 body 支持深度校验，query、refererQuery 等也均支持。

请求验证器 ​

GET请求校验query是否匹配 ​

POST请求校验body是否匹配 ​

动态路径校验params是否匹配 ​

校验请求来源地址参数是否匹配 ​

函数形式的校验器 ​

深度校验 body 是否匹配 ​