Mock.js 模拟数据,拦截 ajax&fetch

7,676 阅读2分钟
原文链接: coderge.com
Article | Mock.js模拟数据,拦截ajax&fetch

Mock.js模拟数据,拦截ajax&fetch

mock.js可以模拟ajax数据,拦截ajax请求,返回模拟数据。在数据格式已经确定的情况下,无需后端返回就可以测试前端程序。

与传统的在代码中写死返回数据的方式不同,使用mock.js可以简单地生成大量随机数据,且数据格式可通过一些规则进行指定。另外,使用mock.js时可完全独立,不与原先的业务逻辑代码耦合,之后需要真实接口数据或发布线上生产环境时可以方便地从业务中移除。

官网链接

安装使用

使用npm、使用bower、直接在页面中引用,etc.

具体细节官方文档描述还是很清楚的,在此便不再赘述。

生成随机数据

能够根据设定的条件生成随机数据,这一点是我最喜欢mock.js的原因,不需要一遍遍修改本地的死数据硬编码,只需要刷新一下页面,数据就不一样了。

文档链接

拦截ajax请求

mock.js默认是支持拦截页面ajax请求的,直接按照官方文档说的来就可以了:

Mock.mock( rurl, template )

记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。

Mock.mock('/api/getName', { name: 'Jack', 'age|10-20': 10 });

function makeRequest(cb) {
  $.ajax({
    type: 'GET',
    url: '/api/getName',
    dataType: 'json',
    success: function(data) {
      cb && cb(data);
    }
  });
}
makeRequest(function(data) {
  console.log(data); // { name: "Jack", age: 14 }
});
makeRequest(function(data) {
  console.log(data); // { name: "Jack", age: 12 }
});

拦截fetch请求

React的开发中多用fetch来代替ajax,而mock.js默认是不支持拦截页面fetch请求的,需要搭配fetch-mock库来实现。在使用fetch-mock库的时候,发现了一个大坑……

importfetch-mock之后,整个页面的所有fetch请求都被拦截了,如果没有对这个地址设定规则,fetch-mock就会报错,然后页面就挂了,挂了!!!!!!!!

查了文档,查了Google,没发现什么好的解决办法,最终自己只能曲线救国了。如果你有更好的办法,欢迎留言或者发邮件告诉我,感激不尽!~

import Mock, {Random} from 'mockjs';
import FetchMock from 'fetch-mock';

// 配置需要mock的路由
FetchMock.once('/path/to/api1', Mock.mock({...}));
FetchMock.once('/path/to/api2', Mock.mock({...}));
FetchMock.once('/path/to/api3', Mock.mock({...}));
FetchMock.once('/path/to/api4', Mock.mock({...}));

// 其他路由使用原生fetch,这段代码必须放最后
FetchMock.once('*', (url, options) => {
  FetchMock.restore();
  return fetch(url, options);
});