mock.js的使用方法

在开发过程中，有很多的ajax请求，前后端分离开发你肯定遇到这样的问题，后台给你的接口文档，你需要在本地模拟数据返回，可能你也用到过我之前用的蠢方法，就是新建一个test.json文件，放入接口文档中写的返回示例，这么做有个很大的问题是不够灵活，而且还需要切换url，现在学会使用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'
})