收下这份Mock，极速与后端联调，提升效率不止亿点点

目录

前言

正文

一、Mock 介绍

1、Mock 的原理

2、Mock.mock()

3、Mock 的语法规范

4、Mock.setup()

5、更多方法

二、Mock 使用

1、安装

2、创建

3、使用

三、注意事项

总结

---

前言

在日常开发过程中，一个必不可少的阶段就是与后端进行联调，通过后端返回的数据，查看页面渲染效果与交互模拟。但是，经常会出现一个尴尬的场景：前端页面开发完了，后端接口还在开发中或是接口文档还在撰写中，这时，前端便只能等后端开发结束才能与之联调。试想一下，如果后端接口过多，且我们需要等所有的接口都开发完才能一起联调，这会造成等待真空期过长，最后会压缩我们联调接口的时间，在短时间内同时联调多个接口，时间压力大，既容易混乱，又容易出bug，整个人心态也受到影响。

那么，有没有什么方式，可以让前端一开发完了立马联调呢？试想一下，只要我们开发完一个页面就立马进行联调然后进行调整，不仅时间充足，还能减少bug的产生，整个人在一个轻松的状态下开发，代码质量也提高了。今天的主角 Mock 就可以帮助我们解决这个窘境。

正文

一、Mock 介绍

1、Mock 的原理

Mock 其实就是 Mock.js，它可以拦截所有的请求并代理到本地模拟数据，模拟请求接口返回数据的这么一个过程，且network 中没有发出任何的请求，降低频繁发请求给服务器造成的压力。用一句话概括就是：生成随机数据，拦截 Ajax 请求。

2、Mock.mock()

该方法根据数据模板生成模拟数据。

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

rurl

可选。

表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如//domain/list.json/、'/domian/list.json'。

rtype

可选。

表示需要拦截的 Ajax 请求类型。例如GET、POST、PUT、DELETE等。

template

可选。

表示数据模板，可以是对象或字符串。例如{ 'data|1-10':[{}] }、'@EMAIL'。

function(options)

可选。

表示用于生成响应数据的函数。

options

指向本次请求的 Ajax 选项集，含有url、type和body三个属性，参见