AJAX数据模拟之Mock.js

参考文献

1.什么是Mock.js?

Mock.js是拦截AJAX请求，并返回请求需要的数据的工具。

2.为什么会有Mock.js?

在前后端分离的开发过程中，在后端接口没完成的情况下可以利用Mock.js提供的随机数据来进行测试。

3.Mock.js的使用？

3.1 安装mockjs

npm install mockjs - -save-dev

3.2 新建mock文件夹

在根目录下新建mock文件夹：

3.3 实现模拟接口

在mock文件夹中新建mock.js文件，并输入下图所示代码

此代码表示：拦截/api/user 接口并随机返回一个包含20个字母的字符串。如若看不明白，请移步Mock.js查阅官方文档。

3.4 连接项目

在src/index.js文件中引入mock.js

import ‘../mock/mock’;

3.5 删除dist/api文件夹+ 去掉接口路径中的.json

dist/api /*删除文件夹*/
- promise: client => client.get(/api/user.json)
+ promise: client => client.get(/api/user) /*去掉接口路径中的.json*/

到此处基本实现模拟请求数据的功能，但还需要配置。因为只有在开发环境下，才引入mock，生产环境无需引入。配置方法如下：

3.6 配置webpack

首先配置webpack.common.config.js，为mock文件夹加个别名：

其次配置webpack.dev.config.js

最后修改src/index.js添加下面的代码：

如此便实现了只有在开发模式下才会启用mock，如果不想使用mock功能，可以在webpack.dev.config.js 中将’MOCK:false’即可！