【前端開發測試】umi 的 mock 功能

umi 里約定 mock 文件夾下的文件即 mock 文件，文件導出接口定義，支持基於 require 動態分析的實時刷新，支持 ES6 語法，以及友好的出錯提示，詳情參看 umijs.org。

export default {
  // 支持值爲 Object 和 Array
  'GET /api/users': { users: [1, 2] },

  // GET POST 可省略
  '/api/users/1': { id: 1 },

  // 支持自定義函數，API 參考 express@4
  'POST /api/users/create': (req, res) => { res.end('OK'); },
};

當客戶端（瀏覽器）發送請求，如：GET /api/users，那麼本地啓動的 umi dev 會跟此配置文件匹配請求路徑以及方法，若是匹配到了，就會將請求經過配置處理，就能夠像樣例同樣，你能夠直接返回數據，也能夠經過函數處理以及重定向到另外一個服務器。

好比定義以下映射規則：

'GET /api/currentUser': {
  name: 'momo.zxy',
  avatar: imgMap.user,
  userid: '00000001',
  notifyCount: 12,
},

訪問的本地 /api/currentUser 接口：

請求頭

返回的數據

 

引入 Mock.js

Mock.js 是經常使用的輔助生成模擬數據的第三方庫，固然你能夠用你喜歡的任意庫來結合 umi 構建數據模擬功能。

import mockjs from 'mockjs';

export default {
  // 使用 mockjs 等三方庫
  'GET /api/tags': mockjs.mock({
    'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }],
  }),
};

添加跨域請求頭

設置 response 的請求頭便可：

'POST /api/users/create': (req, res) => {
  ...
  res.setHeader('Access-Control-Allow-Origin', '*');
  ...
},

合理的拆分你的 mock 文件

對於整個系統來講，請求接口是複雜而且繁多的，爲了處理大量模擬請求的場景，咱們一般把每個數據模型抽象成一個文件，統一放在 mock 的文件夾中，而後他們會自動被引入。

如何模擬延遲

爲了更加真實地模擬網絡數據請求，每每須要模擬網絡延遲時間。

手動添加 setTimeout 模擬延遲

你能夠重寫請求的代理方法，在其中添加模擬延遲的處理，如：

'POST /api/forms': (req, res) => {
  setTimeout(() => {
    res.send('Ok');
  }, 1000);
},

使用插件模擬延遲

上面的方法雖然簡便，可是當你須要添加全部的請求延遲的時候，可能就麻煩了，不過能夠經過第三方插件來簡化這個問題，如：roadhog-api-doc#delay。

 

import { delay } from 'roadhog-api-doc';

const proxy = {
  'GET /api/project/notice': getNotice,
  'GET /api/activities': getActivities,
  'GET /api/rule': getRule,
  'GET /api/tags': mockjs.mock({
    'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }]
  }),
  'GET /api/fake_list': getFakeList,
  'GET /api/fake_chart_data': getFakeChartData,
  'GET /api/profile/basic': getProfileBasicData,
  'GET /api/profile/advanced': getProfileAdvancedData,
  'POST /api/register': (req, res) => {
    res.send({ status: 'ok' });
  },
  'GET /api/notices': getNotices,
};

// 調用 delay 函數，統一處理
export default delay(proxy, 1000);

 

聯調

當本地開發完畢以後，若是服務器的接口知足以前的約定，那麼只須要關閉 mock 數據或者代理到服務端的真實接口地址便可。

npm run start:no-mock

轉自官方說明