ant design pro （十一）advanced Mock 和聯調
一、概述
原文地址：https://pro.ant.design/docs/mock-api-cn
Mock 數據是前端開發過程中必不可少的一環，是分離前後端開發的關鍵鏈路。通過預先跟服務器端約定好的接口，模擬請求數據甚至邏輯，能夠讓前端開發獨立自主，不會被服務端的開發所阻塞。
在 Ant Design Pro 中，因為我們底層的工具是 roadhog，而它自帶了代理請求功能，通過代理請求就能夠輕松處理數據模擬的功能。
二、詳細
2.1、使用 roadhog 的請求代理功能
在通過配置 .roadhogrc.mock.js 來處理代理請求，支持基於 require 動態分析的實時刷新，支持 ES6 語法，以及友好的出錯提示，詳情參看 roadhog。
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‘); },
// Forward 到另一個服務器
‘GET /assets/*‘: ‘https://assets.online/‘,
// Forward 到另一個服務器，並指定子路徑
// 請求 /someDir/0.0.50/index.css 會被代理到 https://g.alicdn.com/tb-page/taobao-home, 實際返回 https://g.alicdn.com/tb-page/taobao-home/0.0.50/index.css
‘GET /someDir/(.*)‘: ‘https://g.alicdn.com/tb-page/taobao-home‘,
};當客戶端（瀏覽器）發送請求，如：GET /api/users，那麽本地啟動的 roadhog server 會跟此配置文件匹配請求路徑以及方法，如果匹配到了，就會將請求通過配置處理，就可以像樣例一樣，你可以直接返回數據，也可以通過函數處理以及重定向到另一個服務器。
比如定義如下映射規則：
‘GET /api/currentUser‘: {
name: ‘momo.zxy‘,
avatar: imgMap.user,
userid: ‘00000001‘,
notifyCount: 12,
},
訪問的本地 /api/users 接口：
請求頭
返回的數據
2.1.1、引入 Mock.js
Mock.js 是常用的輔助生成模擬數據的第三方庫，當然你可以用你喜歡的任意庫來結合 roadhog 構建數據模擬功能。
import mockjs from ‘mockjs‘;
export default {
// 使用 mockjs 等三方庫
‘GET /api/tags‘: mockjs.mock({
‘list|100‘: [{ name: ‘@city‘, ‘value|1-100‘: 50, ‘type|0-2‘: 1 }],
}),
};
2.1.2、添加跨域請求頭
設置 response 的請求頭即可：
‘POST /api/users/create‘: (req, res) => {
...
res.setHeader(‘Access-Control-Allow-Origin‘, ‘*‘);
...
},
2.2、合理的拆分你的 mock 文件
對於整個系統來說，請求接口是復雜並且繁多的，為了處理大量模擬請求的場景，我們通常把每一個數據模型抽象成一個文件，統一放在 mock 的文件夾中，然後再在 .roadhog.mock.js 中引入。
.roadhog.mock.js 的樣例如下：
import mockjs from ‘mockjs‘;
// 引入分離的 mock 文件
import { getRule, postRule } from ‘./mock/rule‘;
import { getActivities, getNotice, getFakeList } from ‘./mock/api‘;
import { getFakeChartData } from ‘./mock/chart‘;
import { getProfileBasicData } from ‘./mock/profile‘;
import { getProfileAdvancedData } from ‘./mock/profile‘;
import { getNotices } from ‘./mock/notices‘;
const proxy = {
‘GET /api/fake_list‘: getFakeList,
‘GET /api/fake_chart_data‘: getFakeChartData,
‘GET /api/profile/basic‘: getProfileBasicData,
‘GET /api/profile/advanced‘: getProfileAdvancedData,
‘GET /api/notices‘: getNotices,
};
export default proxy;
2.3、如何模擬延遲
為了更加真實的模擬網絡數據請求，往往需要模擬網絡延遲時間。
2.3.1、手動添加 setTimeout 模擬延遲
你可以在重寫請求的代理方法，在其中添加模擬延遲的處理，如：
‘POST /api/forms‘: (req, res) => {
setTimeout(() => {
res.send(‘Ok‘);
}, 1000);
},
2.3.2、使用插件模擬延遲
上面的方法雖然簡便，但是當你需要添加所有的請求延遲的時候，可能就麻煩了，不過可以通過第三方插件來簡化這個問題，如：roadhog-api-doc。
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);
2.4、生成 API 文檔
在跟服務端聯調開發的時候，往往需要約定接口，包含路徑，方法，參數，返回值等信息，roadhog-api-doc 提供通過 .roadhog.mock.js 自動生成文檔的功能，安裝使用詳見：roadhog-api-doc。
而相關的文檔信息，同樣需要按照 roadhog-api-doc 提供的方式寫到 .roadhog.mock.js 中。
import { postRule } from ‘./mock/rule‘;
import { format } from ‘roadhog-api-doc‘;
const proxy = {
‘GET /api/currentUser‘: {
// 接口描述
$desc: "獲取當前用戶接口",
// 接口參數
$params: {
pageSize: {
desc: ‘分頁‘,
exp: 2,
},
},
// 接口返回
$body: {
name: ‘momo.zxy‘,
avatar: imgMap.user,
userid: ‘00000001‘,
notifyCount: 12,
},
},
‘POST /api/rule‘: {
$params: {
pageSize: {
desc: ‘分頁‘,
exp: 2,
},
},
$body: postRule,
},
};
// format 函數用於保證本地的模擬正常，如果寫了文檔，這個函數轉換是必要的
export default format(proxy);
生成的結果如下：
2.5、聯調
當本地開發完畢之後，如果服務器的接口滿足之前的約定，那麽你只需要不開本地代理或者重定向代理到目標服務器就可以訪問真實的服務端數據，非常方便。
ant design pro （十一）advanced Mock 和聯調