前端 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 网站搜索也行）：

• https://www.npmjs.com/package/mocker-api
• https://www.npmjs.com/package/mocker-api