前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端Mockjs学习笔记,持续记录

前端Mockjs学习笔记,持续记录

作者头像
房东的狗丶
发布2023-02-17 14:19:54
2430
发布2023-02-17 14:19:54
举报
文章被收录于专栏:友人a的笔记丶

相比于自己写一个模拟数据返回的后端接口,好像还是这个来的更加方便。

什么是mockjs

让前端攻城师独立于后端进行开发。不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

基于对window的xhr对象的二次封装,增加了用于拦截的逻辑。

开始使用

1.安装

代码语言:javascript
复制
npm install mockjs

2.指定拦截ajax请求时的响应时间

代码语言:javascript
复制
Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})

3.指定拦截的规则和返回数据

Mock.mock( rurl?, rtype?, template|function( options ) )

  1. rurl,可选,表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。
  2. rtype,可选,表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
  3. template,可选,表示数据模板,可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
  4. function(options),可选,表示用于生成响应数据的函数。

4.生成随机数据

Mock.Random 是一个工具类,用于生成各种随机数据。

相关例子:http://mockjs.com/examples.html 

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-04-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是mockjs
  • 开始使用
    • 1.安装
      • 2.指定拦截ajax请求时的响应时间
        • 3.指定拦截的规则和返回数据
          • 4.生成随机数据
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档