在开发过程中，有很多的ajax请求，前后端分离开发你肯定遇到这样的问题，后台给你的接口文档，你需要在本地模拟数据返回，可能你也用到过我之前用的蠢方法，就是新建一个test.json文件，放入接口文档中写的返回示例，这么做有个很大的问题是不够灵活，而且还需要切换url，现在学会使用mock.js拦截ajax请求，更加方便的构造你需要的假数据。

Mock.js官方地址
Mock.js 生成随机数据，拦截 Ajax 请求 mock.js语法规范

在这里我举的例子是在vue项目中如何使用mock.js。

安装mockjs

npm install mockjs --save-dev

在项目中创建mock文件目录(用于拦截本地请求，使用mock.js随机生成数据)，并写一个简单的返回示例，后面拦截其他url的ajax请求直接参考这个示例。

//引入mockjs
import Mock from 'mockjs'
//使用mockjs模拟数据
Mock.mock('/\/api\/msdk\/proxy\/query_common_credit/', {
    "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",//随机生成中文名字
//data里的属性看不懂，需要详细看语法规范,博客链接:https://www.cnblogs.com/jiaoshou/p/14162834.html
main.js里面引入该文档

import './assets/js/mock'; //此部分引入的是我们上一步编写的mockjs文档
xxx.vue文件中调用mock.js中模拟的数据接口，这时返回的response就是mock.js中用Mock.mock(‘url’,data）中设置的data了。
query_common_credit(){
      var loginMode = 'msdk';//游戏内默认msdk(wx|qq|msdk)
      var url = '/api/msdk/proxy/query_common_credit';
      this.$axios.get(url)
        .then(response => {
        .catch(error => {
拦截数据的方法Mock.mock()
这里我举例最常用的格式
Mock.mock(url,data);
url用正则写，这样get请求传参时，也能拦截数据了。
Mock.mock('/\/api\/msdk\/proxy\/query_common_credit/', {
    "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",//随机生成中文名字
//data里的属性看不懂，需要详细看语法规范,博客链接:https://www.cnblogs.com/jiaoshou/p/14162834.html
设置延时请求到数据
不设置延时很有可能遇到坑，这里需要留意，因为真实的请求是需要时间的，mock不设置延时则是马上拿到数据返回，这两个情况不同可能导致在接口联调时出现问题。所以最好要先设置延时请求到数据。
//延时400s请求到数据
Mock.setup({
    timeout: 400
//延时200-600毫秒请求到数据
Mock.setup({
    timeout: '200-600'
mock获取get、post请求参数
GET 请求获取参数
get请求如果带参数，请把接口url写为正则匹配，否则匹配不到就报错（Mock.mock(RegExp(API_URL.LOGIN + ".*")）
// get 普通匹配：只能匹配到 ${process.env.VUE_APP_API_BASE_URL}/api_admin/table ，这个路径，由于get请求参数是拼接在url后面的，所以这个是匹配不到的，这时我们需要改写成正则匹配
Mock.mock(`${process.env.VUE_APP_API_BASE_URL}/api_admin/table`, 'get', (options) => {
  let result = {};
  return result;
// get 正则匹配：这样get请求，带不带参数就都可以获取到了
Mock.mock(RegExp(`${process.env.VUE_APP_API_BASE_URL}/api_admin/table` + ".*"), 'get', (options) => {
  let result = {};
  // 这样就可以获取到带参数的完整地址了，自己还需要再写个方法提取参数，网上有很多，mock没有内置
  // http://localhost:3333/api_admin/table?userName=admin&passWord=8888889
  console.log('mock', options.url);
  return result;
// get 扩展，如果你每次写正则觉得麻烦，可以提到一个方法里，每天调用即可
 * 将url改写成正则模式，mock匹配get请求路由时候使用，因为get请求参数是拼接在url后面，不用正则匹配不到
 * @param {String} url 
 * @returns {RegExp}
function regUrl(url) {
    return RegExp(url + ".*");
Mock.mock(regUrl(`${process.env.VUE_APP_API_BASE_URL}/api_admin/table`), 'get', (options) => {
  let result = {};
  // 这样就可以获取到带参数的完整地址了，自己还需要再写个方法提取参数，网上有很多，mock没有内置
  // http://localhost:3333/api_admin/table?userName=admin&passWord=8888889
  console.log('mock', options.url);
  return result;
POST 请求获取参数
post 请求获取参数，一般普通匹配就满足了，但是极少数会在路径拼接参数，这里就用正则匹配举例
// post 获取参数，一般普通匹配就满足了，但是极少数会在路径拼接参数，这里就用正则匹配举例
Mock.mock(regUrl(`${process.env.VUE_APP_API_BASE_URL}/api_admin/table`), 'post', (options) => {
  let result = {};
  // options.body 就是post参数 
  console.log('mock', options.body);
  return result;
options.body拿到这个其实就是获取到了参数，由于 post 请求参数方式有多种情况(不知道的可以访问下面链接)，后续取值略有不同，相信你应该知道怎么做的。
HTTP请求中Get、Post与后台参数接收的分析