背景

岫巖網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站開(kāi)發(fā)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來(lái)到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

前端在早期jQuery時(shí)代時(shí)，前端功能和后端工程基本上都是合在一起，典型的就是常見(jiàn)的maven工程下面的webapp目錄包含前端各類(lèi)靜態(tài)資源文件。

這個(gè)時(shí)候，我們總是會(huì)遇到這些問(wèn)題：

1. 老大，接口文檔還沒(méi)輸出，我的好多活干不下去??！
2. 后端小哥，接口寫(xiě)好了沒(méi)，我要測(cè)試??！
3. 測(cè)試時(shí)間不夠啊，就要發(fā)版了，今天難道我有看明天的太陽(yáng)升起？

諸如種種，就是一句話：勞資，再也不要指望你們了！

node出現(xiàn)之后，準(zhǔn)確的說(shuō)是前后端分離之后，前端迫切需要一種機(jī)制，不在需要依賴(lài)后端接口開(kāi)發(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ù)類(lèi)
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ù)類(lèi)，示例：

// 獲取 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ī)生成任意名稱(chēng)
   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á)式去匹配路徑即可完成，示例：

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

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

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

1. 為什么在 main.js 入口文件中引入 mockjs 的相關(guān)配置文件？
2. 入口文件不都是在 webpack 中被編譯，然后在瀏覽器中執(zhí)行的嗎？
3. 控制臺(tái)沒(méi)有攔截到請(qǐng)求，那就是沒(méi)有攔截到發(fā)送到服務(wù)器的請(qǐng)求了，對(duì)吧？

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

1. 源碼中首先查找是否在 Mockjs 中定義了該請(qǐng)求，有則進(jìn)行攔截，然后使用其模擬請(qǐng)求對(duì)象 MockXMLHttpRequest 進(jìn)行響應(yīng)，即此時(shí)不發(fā)送 XHR 請(qǐng)求；
2. 否則使用本地標(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)致解析或取值失敗，我該怎么辦？

剛開(kāi)始的時(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;
}

剛開(kāi)始的時(shí)候?qū)傩?code>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)生效

剛開(kā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)，如下：

結(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)求

剛開(kāi)始時(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á)式，就好了。如：

// 剛開(kāi)始字符串路徑，帶參數(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í)際開(kāi)發(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á)式書(shū)寫(xiě)路徑；post 字符串和正則都行；

總結(jié)

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。