Skip to content
On this page

请求验证器

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

GET请求校验query是否匹配

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

ts
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中包含该参数即可,无需全匹配。

ts
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 参数是否匹配

ts
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 数据内容

ts
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 值。

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

ts
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 的 子集。

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: ''
})
ts
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 等也均支持。

Released under the MIT License.