1、mock簡介
Mock 數(shù)據(jù)是前端開發(fā)過程中必不可少的一環(huán)坏平，是分離前后端開發(fā)的關(guān)鍵鏈路拢操。通過預(yù)先跟服務(wù)器端約定好的接口，模擬請求數(shù)據(jù)甚至邏輯功茴，能夠讓前端開發(fā)獨(dú)立自主庐冯，不會被服務(wù)端的開發(fā)所阻塞。
在 Ant Design Pro 中坎穿，因?yàn)槲覀兊牡讓涌蚣苁?umi展父，而它自帶了代理請求功能，通過代理請求就能夠輕松處理數(shù)據(jù)模擬的功能玲昧。
umi 里約定 mock 文件夾下的文件即 mock 文件栖茉，文件導(dǎo)出接口定義，支持基于 require 動態(tài)分析的實(shí)時刷新孵延，支持 ES6 語法吕漂，以及友好的出錯提示，詳情參看 umijs.org尘应。
export default {
// 支持值為 Object 和 Array
'GET /api/users': { users: [1, 2] },
// GET POST 可省略
'/api/users/1': { id: 1 },
// 支持自定義函數(shù)惶凝，API 參考 express@4
'POST /api/users/create': (req, res) => {
res.end('OK');
},
};
當(dāng)客戶端（瀏覽器）發(fā)送請求，如：GET /api/users犬钢，那么本地啟動的 umi dev 會跟此配置文件匹配請求路徑以及方法苍鲜，如果匹配到了，就會將請求通過配置處理玷犹，就可以像樣例一樣混滔，你可以直接返回?cái)?shù)據(jù)，也可以通過函數(shù)處理以及重定向到另一個服務(wù)器歹颓。
2坯屿、添加跨域請求頭
'POST /api/users/create': (req, res) => {
...
res.setHeader('Access-Control-Allow-Origin', '*');
...
},
3、使用代理proxy
當(dāng)想請求真實(shí)服務(wù)器地址的時候巍扛，只需要在config.js中設(shè)置對應(yīng)的代理即可
proxy: {
'/api/': {
target: 'https://preview.pro.ant.design/api/',
changeOrigin: true,
pathRewrite: { '^/api': '' },
},
},
通過以上代碼就可以代理到服務(wù)器的真實(shí)接口地址
當(dāng)本地開發(fā)完畢之后领跛，如果服務(wù)器的接口滿足之前的約定，那么只需要關(guān)閉 mock 數(shù)據(jù)或者代理到服務(wù)端的真實(shí)接口地址即可撤奸。
4隔节、關(guān)閉mock數(shù)據(jù)
在啟動的時候指定關(guān)閉mock數(shù)據(jù)
$ npm run start:no-mock
