umi的mock


Mock 數據

Mock 數據是前端開發過程中必不可少的一環,是分離前后端開發的關鍵鏈路。通過預先跟服務器端約定好的接口,模擬請求數據甚至邏輯,能夠讓前端開發獨立自主,不會被服務端的開發所阻塞。

約定式 Mock 文件

Umi 約定 /mock 文件夾下所有文件為 mock 文件。

比如:

.
├── mock
├── api.ts
└── users.ts
└── src
└── pages
└── index.tsx

/mock 下的 api.ts 和 users.ts 會被解析為 mock 文件。

編寫 Mock 文件

如果 /mock/api.ts 的內容如下,

export default {
// 支持值為 Object 和 Array
'GET /api/users': { users: [1, 2] },
 
// GET 可忽略
'/api/users/1': { id: 1 },
 
// 支持自定義函數,API 參考 express@4
'POST /api/users/create': (req, res) => {
// 添加跨域請求頭
res.setHeader('Access-Control-Allow-Origin', '*');
res.end('ok');
},
}

然后訪問 /api/users 就能得到 { users: [1,2] } 的響應,其他以此類推。

配置 Mock

詳見配置#mock

如何關閉 Mock?

可以通過配置關閉,

export default {
mock: false,
};

也可以通過環境變量臨時關閉,

$ MOCK=none umi dev

引入 Mock.js

Mock.js 是常用的輔助生成模擬數據的三方庫,借助他可以提升我們的 mock 數據能力。

比如:

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM