前端 mock 现在已经成为了前端开发流程中非常重要的一环，我们来一起优雅的实现 mock 吧~
最简单的 mock 方式
如果是说最简单的 mock 肯定就是直接写静态 JS 文件了。
import mockData from 'mock-data.js'
可能还会加个延时和 Promise：
const data = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(mockData)
}, 2000)
})
但是这些都特别不优雅，因为会 import 一些东西进来，导致业务代码并不纯粹。
使用 node 拦截的 mock 方式
如果前端项目，可以在 node 层做 mock，但同样也会让 node 层的代码引入一些 mock 数据。
使用 mocker-api 来进行 mock
这里推荐使用 mocker-api 来做接口 mock，它会启动一个 node 服务专门用于 mock 交互，另外在 mock 时也不需要费心思去想各种 mock 数据，使用 faker 库可以随机生成各类数据。非常的好用。
下面是 mocker-api 的配置：
const proxy = {
// Priority processing.
// apiMocker(app, path, option)
// This is the option parameter setting for apiMocker
_proxy: {
proxy: {
// Turn a path string such as `/user/:name` into a regular expression.
// https://www.npmjs.com/package/path-to-regexp
'/repos/(.*)': 'https://api.github.com/',
'/:owner/:repo/raw/:ref/(.*)': 'http://127.0.0.1:2018',
'/api/repos/(.*)': 'http://127.0.0.1:3721/'
},
// rewrite target's url path. Object-keys will be used as RegExp to match paths.
// https://github.com/jaywcjlove/mocker-api/issues/62
pathRewrite: {
'^/api/repos/': '/repos/',
},
changeHost: true,
// modify the http-proxy options
httpProxy: {
options: {
ignorePath: true,
},
listeners: {
proxyReq: function (proxyReq, req, res, options) {
console.log('proxyReq');
},
},
},
},
// =====================
// The default GET request.
// https://github.com/jaywcjlove/mocker-api/pull/63
'/api/user': {
id: 1,
username: 'kenny',
sex: 6
},
'GET /api/user': {
id: 1,
username: 'kenny',
sex: 6
},
'GET /api/user/list': [
{
id: 1,
username: 'kenny',
sex: 6
}, {
id: 2,
username: 'kenny',
sex: 6
}
],
'GET /api/:owner/:repo/raw/:ref/(.*)': (req, res) => {
const { owner, repo, ref } = req.params;
// http://localhost:8081/api/admin/webpack-mock-api/raw/master/add/ddd.md
// owner => admin
// repo => webpack-mock-api
// ref => master
// req.params[0] => add/ddd.md
return res.json({
id: 1,
owner, repo, ref,
path: req.params[0]
});
},
'POST /api/login/account': (req, res) => {
const { password, username } = req.body;
if (password === '888888' && username === 'admin') {
return res.json({
status: 'ok',
code: 0,
token: "sdfsdfsdfdsf",
data: {
id: 1,
username: 'kenny',
sex: 6
}
});
} else {
return res.status(403).json({
status: 'error',
code: 403
});
}
},
'DELETE /api/user/:id': (req, res) => {
console.log('---->', req.body)
console.log('---->', req.params.id)
res.send({ status: 'ok', message: '删除成功！' });
}
}
module.exports = proxy;
如果用过 RESTful API 的同学很好理解，GET、POST、PUT、DELETE 方法都有，也可以定义路由参数、拿到网络请求的请求和响应数据。非常的齐全，除了不连数据库，基本上的前后端交互都能实现了。
像我的项目用的是 webpack，所以可以将 mocker-api 配在 webpack 配置中。
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const path = require('path');
+ const apiMocker = require('mocker-api');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map',
+ devServer: {
+ ...
+ before(app){
+ apiMocker(app, path.resolve('./mocker/index.js'), {
+ proxy: {
+ '/repos/*': 'https://api.github.com/',
+ '/:owner/:repo/raw/:ref/*': 'http://127.0.0.1:2018'
+ },
+ changeHost: true,
+ })
+ }
+ },
plugins: [
new HtmlWebpackPlugin({
title: 'Development'
})
],
output: {
filename: '[name].bundle.js',
path: require.resolve(__dirname, 'dist')
}
};
会在网络请求的前，先走 mocker-api。如果有 mocker 就进行 mocker。
使用 faker 快速生成 mocker 数据
faker 提供了很多函数来生成不同类型的数据。
import faker from 'faker'
var randomName = faker.name.findName(); // Rowan Nikolaus
var randomEmail = faker.internet.email(); // Kassandra.Haley@erich.biz
var randomCard = faker.helpers.createCard(); // random contact card containing many properties
所以，如果需要造一个长度为 10000 的数组，完全可以这样：
import faker from 'faker'
const list = new Array(10000).fill(true).map(() => faker.name.findName())
最后
最后贴一下两个项目的地址（或者你直接去 npm 网站搜索也行）：
网友评论