Mock.js 生成随机数据 拦截 Ajax 请求 - 文章教程

Mock.js 生成随机数据 拦截 Ajax 请求

发布于 2019-12-06 字数 2021 浏览 1464 评论 0

前端开发过程中,总是会有一些 Ajax 请求,之前的做法是自己新建一些 JSON 文件,然后访问本地的文件,这么做有个很大的问题就是不够灵活,而且还需要频繁切换 url,现在有了 Mock.js 拦截 Ajax 请求,就更加方便的构造你需要的假数据。

Mock.js 生成随机数据 拦截 Ajax 请求

特点

前后端分离

让前端攻城师独立于后端进行开发。

增加单元测试的真实性

通过随机数据,模拟各种场景。

开发无侵入

不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。

用法简单

符合直觉的接口。

数据类型丰富

支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

方便扩展

支持支持扩展更多数据类型,支持自定义函数和正则。

使用方法

1、安装 Mockjs

npm install mockjs --save-dev

2、在项目中创建 mock.js,并写一个简单的返回示例:

// 引入 mockjs
import Mock from 'mockjs'
// 使用 mockjs模拟数据
Mock.mock('/api/proxy/query', {
  "ret":0,
  "data":{
    "mtime": "@datetime",//随机生成日期时间
    "score|1-800": 800,//随机生成1-800的数字
    "rank|1-100": 100,//随机生成1-100的数字
    "stars|1-5": 5,//随机生成1-5的数字
    "nickname": "@cname",//随机生成中文名字
  }
});

3、main.js 里面引入该文档

import './js/mock'

4、vue 文件中调用 mock.js 中模拟的数据接口,这时返回的 response 就是 mock.js 中用 Mock.mock(‘url, data) 中设置的 data 了。

var url = '/api/proxy/query';
this.$axios.get(url).then(response => {
  // code
}).catch(error => {
  // code
})

设置延时返回数据

任何 API 的请求都是有延迟,所以为了增加真实性,我们可以设置一定的延迟返回数据

//延时400s请求到数据
Mock.setup({
  timeout: 400
})
//延时200-600毫秒请求到数据
Mock.setup({
  timeout: '200-600'
})

更多使用方法请参见:Mock.js 中文文档

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

cs163v

文章 0 评论 0

Mr Rock

文章 0 评论 0