接口 Mock

为了实现请求接口 Mock，开发框架默认提供了如下一些基础设施。

本地开发 Server

为了 Mock 请求接口，需要提供一个本地开发 Server，只需要增加如下构建配置：

  1. // swan.config.js
  2. {
  3.     server: { // 启用开发 Server
  4.         port: 9090, // 本地 server 监听的端口
  5.         type: 'express', // server 类型
  6.         middlewares: [] // 要加载的中间件
  7.     }
  8. }

开发 Server 配置项：

  • port: 监听的端口号，可选，默认 8080

  • type: 服务器类型，可选

    • express: 需要安装相应的依赖 npm i express --save-dev
    • koa: 需要安装相应的依赖 npm i koa --save-dev
    • connect: 默认，需要安装相应的依赖 npm i connect --save-dev

  • middlewares: 启动的 server 要加载的中间件，可选

命令行启动 server，需要在构建启动参数加上 --server 选项，也可以通过 --port 9090 指定要监听的端口，按项目模板提供的 script，只需要执行：npm run dev:server。

请求地址替换

开发过程中，代码里指定的请求地址一般都是线上环境，开发测试环节为了避免频繁修改代码或者加入各种 if/else 分支，开发框架提供了一个替换处理器 replacement，可以在开发阶段或者测试阶段将其替换成我们期望替换的线下环境或者本地环境：

  1. // swan.config.js
  2. {
  3.     dev: { // 为了使 dev 配置的 rules 能生效，需要构建环境变量 NODE_ENV 指定为 dev
  4.         rules: [
  5.             {
  6.                 match: 'src/**/*.js',
  7.                 processors: [
  8.                     {
  9.                         name: 'replacement',
  10.                         options: {
  11.                             // 将线上环境替换成本地开发环境，用变量 `${devServer}` 引用本地开发 Server 环境
  12.                             'https://online.com': '${devServer}'
  13.                         }
  14.                     }
  15.                     // 也可以用数组形式声明：第一个元素处理器名称，第二个元素处理器的选项
  16.                     // ['replacement', {
  17.                     //     'https://online.com': '${devServer}',
  18.                     // }]
  19.                 ]
  20.             }
  21.         ]
  22.     },
  23.     test: { // 为了使 test 配置的 rules 能生效，需要构建环境变量 NODE_ENV 指定为 test
  24.         {
  25.             match: 'src/**/*.js',
  26.             processors: [
  27.                 ['replacement', {
  28.                     // 将线上环境替换成测试环境
  29.                     'https://online.com': 'https://test.com',
  30.                 }]
  31.             ]
  32.         }
  33.     }
  34. }
  35. `

Mock 中间件

为了拦截请求进行 mock，可以在前面本地开发 server 的 middlewares 引入 mock 请求的中间件。

  • 可以使用类似 autoresponse Mock 中间件

    1.   {
    2.       server: { // 启用开发 Server
    3.           port: 9090, // 本地 server 监听的端口
    4.           type: 'express', // server 类型
    5.           middlewares: [
    6.               require('autoresponse').express({
    7.                   post: true,  // mock all post request
    8.                   patch: true, // mock all patch request
    9.                   get: {       // mock all `/xx/xx` path
    10.                       match: function (reqPathName) {
    11.                           return !/\.\w+(\?.*)?$/.test(reqPathName);
    12.                       }
    13.                   }
    14.               })
    15.           ]
    16.       }
    17.   }