【前端開發測試】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

轉自官方說明