UmiJS介紹--mock（四）

umi 裡約定 mock 檔案夾下的檔案即 mock 檔案，檔案導出接口定義，支援基于 require 動态分析的實時重新整理，支援 ES6 文法，以及友好的出錯提示

1. 引入 Mock.js

Mock.js是常用的輔助生成模拟資料的第三方庫

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. 添加跨域請求頭

設定 response 的請求頭即可：

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

3. 合理的拆分你的 mock 檔案

合理的拆分你的 mock 檔案

對于整個系統來說，請求接口是複雜并且繁多的，為了處理大量模拟請求的場景，我們通常把每一個資料模型抽象成一個檔案，統一放在 mock 的檔案夾中，然後他們會自動被引入。

4. 模拟延遲

4.1 手動添加 setTimeout 模拟延遲

你可以在重寫請求的代理方法，在其中添加模拟延遲的處理，如：

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

4.2 使用插件模拟延遲

如：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);
           

5. 使用 umi 的 mock 功能

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

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

  // 支援自定義函數，API 參考 [email protected]
  'POST /api/users/create': (req, res) => { res.end('OK'); },
};
           

6. 聯調

本地開發完畢之後，如果伺服器的接口滿足之前的約定，那麼你隻需要不開本地代理或者重定向代理到目标伺服器就可以通路真實的服務端資料，非常友善。

config/config.js

proxy: {
    '/api/': {
      target: 'https://preview.pro.ant.design/',
      changeOrigin: true,
    },
  },
           

來源https://umijs.org/zh/guide/with-dva.html