摘要：想到函數(shù)有延遲網(wǎng)絡(luò)請(qǐng)求稀釋事件延遲執(zhí)行的效果，于是將模板函數(shù)用包裹起來(lái)，如下結(jié)果出現(xiàn)有意思的事情當(dāng)請(qǐng)求比較頻繁，在延遲時(shí)間內(nèi)，本次請(qǐng)求得到的響應(yīng)數(shù)據(jù)是上次請(qǐng)求的結(jié)果。

前端在早期jQuery時(shí)代時(shí)，前端功能和后端工程基本上都是合在一起，典型的就是常見的maven工程下面的webapp目錄包含前端各類靜態(tài)資源文件。
這個(gè)時(shí)候，我們總是會(huì)遇到這些問(wèn)題：

老大，接口文檔還沒(méi)輸出，我的好多活干不下去??！

后端小哥，接口寫好了沒(méi)，我要測(cè)試啊！

測(cè)試時(shí)間不夠啊，就要發(fā)版了，今天難道我有看明天的太陽(yáng)升起？

諸如種種，就是一句話：勞資，再也不要指望你們了！
node出現(xiàn)之后，準(zhǔn)確的說(shuō)是前后端分離之后，前端迫切需要一種機(jī)制，不在需要依賴后端接口開發(fā)。經(jīng)過(guò)這幾年的發(fā)展，有好多大牛在這方面進(jìn)行了研究。
現(xiàn)在我們終于可以實(shí)現(xiàn)真實(shí)模擬測(cè)試?yán)?。如今天的主?mockjs

1.首先在 src 目錄創(chuàng)建 mock 文件夾，定義 mock 主文件 index.js ，在該文件中定義攔截路由配置；

/**
 * 定義本地測(cè)試接口，最好與正式接口一致，避免聯(lián)調(diào)階段修改工作量
 */
// 引入mockjs
import Mock from "mockjs";
// 引入模板函數(shù)類
import record from "./presc-record-api";

Mock.setup({
  timeout: 800, // 設(shè)置延遲響應(yīng)，模擬向后端請(qǐng)求數(shù)據(jù)
});

// Mock.mock( url, post/get , 返回的數(shù)據(jù))；
Mock.mock(//api/healthPlat/getRecipe/w*/w*/, "get", record.getRecipe);

2.在指定的文件中定義模板函數(shù)類，示例：

// 獲取 mock.Random 對(duì)象
// 引入mockjs
import { Random } from "mockjs";
import Utils from "./Utils";

function getRecipe(req) {
  // mock一組數(shù)據(jù)
  const data = [];
  for (let i = 0; i < 10; i += 1) {
    const o = {
      recipeId: Random.guid(),
      billId: Random.string(10),
      orgId: Random.string("number", 8, 10),
      viewName: Random.cword(4, 16), // 隨機(jī)生成任意名稱
      personName: Random.cname(),
      reason: Random.csentence(10, 32),
    };
    data.push(o);
  }
  // 返回響應(yīng)數(shù)據(jù)對(duì)象
  return Utils.setRes(req, {
    data: {
      idCard: Random.id(), // 隨機(jī)
      details: data,
    },
    totalCount: 20,
  });
}

export default {
  getRecipe,
};

3.在 main.js 中引入 mock/index.js 文件；

// 引入mock文件
import "./mock/index"; // mock 方式，正式發(fā)布時(shí)，注釋掉該處即可

接下來(lái)的工作就是配置你的 mock 路由以及模板函數(shù)啦。Have Fun!

這里我介紹一下在 vue-cli 中使用 Mockjs 踩到的坑：

1.請(qǐng)求路徑包含變量，我該怎么辦？

使用過(guò) router 碼友知道，我們經(jīng)常要處理地址中包含參數(shù)的路由，此時(shí)我們只需要在 Mockjs 中使用正則表達(dá)式去匹配路徑即可完成，示例：

Mock.mock(//api/healthPlat/getRecipeDetail/w*/w*/, "get", record.getRecipeDetail);

即我們只在變量的地方使用正則字符集合去匹配我們的變量。

2.為什么在控制臺(tái)里面的 network 中沒(méi)有看到我的請(qǐng)求？

剛開始測(cè)試時(shí)，我查看 network 沒(méi)有看到請(qǐng)求，感到很奇怪！就自問(wèn)自己幾個(gè)問(wèn)題：

為什么在 main.js 入口文件中引入 mockjs 的相關(guān)配置文件？

入口文件不都是在 webpack 中被編譯，然后在瀏覽器中執(zhí)行的嗎？

控制臺(tái)沒(méi)有攔截到請(qǐng)求，那就是沒(méi)有攔截到發(fā)送到服務(wù)器的請(qǐng)求了，對(duì)吧？

帶著這些問(wèn)題，閱讀源碼和文檔，發(fā)現(xiàn)：

源碼中首先查找是否在 Mockjs 中定義了該請(qǐng)求，有則進(jìn)行攔截，然后使用其模擬請(qǐng)求對(duì)象 MockXMLHttpRequest 進(jìn)行響應(yīng)，即此時(shí)不發(fā)送 XHR 請(qǐng)求；

否則使用本地標(biāo)準(zhǔn) XHR 對(duì)象進(jìn)行請(qǐng)求，此時(shí)可以在控制臺(tái) network 中看到請(qǐng)求信息

因此，在 main.js 入口文件中引入 mockjs 的相關(guān)配置文件，即是在前端代碼中加入了 Mockjs 的模擬方式，它將在瀏覽器中被執(zhí)行，而不是真正的發(fā)送請(qǐng)求，不過(guò)我們可以將其打印到控制臺(tái)進(jìn)行查看。
網(wǎng)友評(píng)論可以在服務(wù)器中使用 mockjs ，此時(shí)就是真是的請(qǐng)求，可以在控制臺(tái)中查看到請(qǐng)求信息，此處本人未進(jìn)行相應(yīng)實(shí)踐，有興趣的可以參看 mock-server:

3.使用模板語(yǔ)法，返回的數(shù)據(jù)里面包含規(guī)則“|rules”，導(dǎo)致解析或取值失敗，我該怎么辦？

剛開始的時(shí)候，我按照文檔上說(shuō)的模板語(yǔ)法進(jìn)行配置，如：

看到屬性 code 居然帶著規(guī)則一起返回了，我說(shuō)我請(qǐng)求為啥沒(méi)有解析成功啊，原來(lái) res.code 一直是 undefined ，這是坑啊。
查看源碼和可以搜到的網(wǎng)上示例發(fā)現(xiàn)：沒(méi)有使用模板規(guī)則的現(xiàn)象，而是使用 mockjs 提供的內(nèi)置函數(shù)來(lái)實(shí)現(xiàn)，如 .id() .cname() 等等方法。
于是我將mock相關(guān)文件中 code 定義改成下面這樣：

function  setRes(req, options) {
  window.console.log(req.url);
  const { code = Random.int(0, 5) >= 1 ? 1 : 0, message, data = {}, totalCount = 100 } = options;
  const result = {
    code,
    message: message || ["失敗", "錯(cuò)誤", "異常"][Random.integer(0, 2)],
    data,
    totalCount,
  };
  window.console.log(result);
  return result;
}

剛開始的時(shí)候?qū)傩?b>code是這樣定義的—— "code|1", true, ，后來(lái)改成了 code = Random.boolean(), ，發(fā)現(xiàn)生成 false 的概覽太高了，不適合我們真實(shí)的場(chǎng)景。
想到我們只需要增加 code 為 1 的概率，于是本人使用 Random.int(0, 5) 隨機(jī)生成一個(gè)整數(shù)，當(dāng)這個(gè)整數(shù)大于等于1，我們將 code 設(shè)置為 1 ，其他情況為 0 。
也就是說(shuō)從概率上將，成功的概率為 0.8，失敗的概率為 0.2，基本符合我們測(cè)試要求，哈哈，機(jī)智不^<^。

4.模擬異步請(qǐng)求的過(guò)程，發(fā)現(xiàn)請(qǐng)求好像是瞬間完成，loading效果沒(méi)生效

剛開始的時(shí)候，沒(méi)有設(shè)置延遲響應(yīng)，每次請(qǐng)求都好像是瞬間完成的，沒(méi)有一步操作的那種等待感，沒(méi)有看到loading罩層出現(xiàn)。
自己debug時(shí)，loading罩層是有的，于是想到：請(qǐng)求沒(méi)有被延遲，而是被同步執(zhí)行了。
想到 lodash.debounce 函數(shù)有延遲網(wǎng)絡(luò)請(qǐng)求、稀釋事件、延遲執(zhí)行的效果，于是將模板函數(shù)用 debounce 包裹起來(lái)，如下：

Mock.mock("/api/healthPlat/chronicdisease", "get", debounce(record.chronicdisease, 600));

結(jié)果出現(xiàn)有意思的事情：當(dāng)請(qǐng)求比較頻繁，在延遲時(shí)間內(nèi)，本次請(qǐng)求得到的響應(yīng)數(shù)據(jù)是上次請(qǐng)求的結(jié)果。這顯然不是我們希望看到的，而且我們一般是用 debounce 的來(lái)稀釋請(qǐng)求的，用在請(qǐng)求發(fā)送之后顯然違背了我們的初衷。
翻閱 mockjs 文檔，發(fā)現(xiàn)作者已經(jīng)考慮了這個(gè)事情。哎，辛苦忙活了大半天，還是要好好看文檔啊。具體如下：

Mock.setup({
  timeout: 800, // 設(shè)置延遲響應(yīng)，模擬向后端請(qǐng)求數(shù)據(jù)
});

5. Mock 無(wú)法攔截帶參數(shù)的 get 請(qǐng)求

剛開始時(shí)，發(fā)現(xiàn)設(shè)置的有些 get 請(qǐng)求總是請(qǐng)求不到 mock 的數(shù)據(jù)，而有些 get 請(qǐng)求能得到 mock 的數(shù)據(jù)，post 則不存在這樣的問(wèn)題。非常郁悶！
仔細(xì) debug 時(shí)發(fā)現(xiàn)：get 請(qǐng)求帶參數(shù)時(shí)失敗，找不到路徑；get 請(qǐng)求不帶參數(shù)成功，路徑?jīng)]找到，獲取到 mock 的數(shù)據(jù)；post 路徑正確找到，成功得到 mock 數(shù)據(jù)。
這時(shí)突然意思到：get 請(qǐng)求的路徑默認(rèn)后面會(huì)加上參數(shù)，因此和設(shè)置的路徑?jīng)]有匹配上，導(dǎo)致路徑?jīng)]找到，請(qǐng)求失敗。
于是本人將路徑改成正則表達(dá)式，就好了。如：

// 剛開始字符串路徑，帶參數(shù)的 get 請(qǐng)求匹配失敗
Mock.mock("/api/healthPlat/renewCancel", "get", manage.renewCancel);

改成下面這樣就好了：

// 正則表達(dá)式路徑，帶參數(shù)的 get 請(qǐng)求匹配成功
Mock.mock(//api/healthPlat/renewCancel/, "get", manage.renewCancel);

但是實(shí)際開發(fā)過(guò)程中，發(fā)現(xiàn)上述正則表達(dá)式不夠完備，如后續(xù)我們又另一個(gè)路徑 /api/healthPlat/renewCancelAddr 也會(huì)匹配上述地址，這不是我們希望有的。
此時(shí)我們只需改進(jìn)下正則表達(dá)式即可：

// 正則表達(dá)式路徑，帶參數(shù)的 get 請(qǐng)求匹配成功
Mock.mock(//api/healthPlat/renewCancel(|?S*)$/, "get", manage.renewCancel);

即只有路徑為 /api/healthPlat/renewCancel 的 get 請(qǐng)求才會(huì)匹配上述規(guī)則。
最后建議：get 請(qǐng)求都用正則表達(dá)式書寫路徑；post 字符串和正則都行；

mock雖然存在以上所涉及的局限和問(wèn)題，不過(guò)對(duì)于日常自測(cè)聯(lián)調(diào)還是很有益處，個(gè)人覺得主要還是簡(jiǎn)單可行。當(dāng)然本文所述方式，不僅僅局限在 vue-cli 中，其他框架中亦可按此法進(jìn)行配置。
上述有不盡之處或是紕漏之處，還望指正，鳴謝！