☀️ 前言
- 大家好我是小盧，事情是這樣子，前段時間有個前端朋友入職了，為了履歷更好看在裡面寫道："在前端熟練使用Mock調試接口，模拟接口資料，減少聯調問題大大提高了開發效率"。
- 但是在入職後在開會的時候被指出項目開發進度緩慢。
- 産品經理：為什麼項目進度這麼慢？
- 後端：已經快馬加鞭寫接口中，部分接口我已經給了前端接口文檔????。
- 前端：我的頁面寫好了後端接口沒寫好，我的前端頁面大大依賴後端接口，我沒有辦法進行資料調試????。
- 前端組長怒吼：你不是說你會用Mock？你倒是用啊????！
- 以上根據真實事件改編
????♂️ 問題出在哪
- 當這個朋友找到我的時候我很是疑惑？對啊你不是說會用Mock嗎怎麼不用呢????？
- 後來我才得知原來他說的熟練使用Mock是指在前端根據每個接口來寫一個json來對應接口調用。
- 這樣不僅耗時長還容易寫錯，怪不得會被吐槽開發效率慢。
- “那小盧哥，有沒有什麼辦法可以讓我在本地快捷進行Mock調試呢？????”
- 那當然有啦，聽我細細道來，但是在這之前先給新同學科普一下Mock是什麼？
❓ 什麼是Mock
- 如上圖所示，這是我們在開發中必須經曆的過程。
- 在普遍的開發環境中，我們在拿到一個需求的時候，一般都是前後端同時開發。
- 什麼？你說能不能一個需求等後端全部開發完了再讓前端對接，這是不可能的事情????，除非公司是你家的。
- 但是事實上很多時候前端能力較強的小夥伴們，寫頁面的速度都特别快，唰唰唰很快啊幾個靜态頁面全部做完了，剩下的就是對接口了。
- 這時候就需要涉及到資料方面的coding，我們需要依賴傳回的接口資料進行一些複雜的邏輯處理，但是在對接口的同時難免會遇到接口文檔描述不清晰的情況，比如參數名寫錯了，是否必填沒有标注出來，種種讓人頭皮發麻的小問題暴露出來。
- 你要知道在開發的路上不隻是你自己一個人在忙，如果每個事情都跑去問後端：“你這是不是寫錯了”，“哪個是必填啊”，耽誤的是大家的時間，反而還會給後端同僚營造一種“你好菜啊”的感覺????。
- 這時候學會使用最适合自己的Mock資料的方法就非常重要，Mock翻譯過來就模拟，顧名思義Api Mock就是模拟接口資料。
- 說白了就是在後端資料沒有出來的情況下，還能擷取到和後端約定資料結構一樣的模拟資料的一門技術，以避免後端接口進度滞後影響我們正常的開發 。
???????? 别人是怎麼做的
- 如果你說你們公司的接口後端都會給你寫好假資料假接口來供你調試，那我強烈建議你多請他多吃幾次烤羊腿????，畢竟這種後端少之又少，如果有，那肯定是跟你過命的好兄弟了。
- 在征集了一些前端朋友的現狀後總結出大家經常用的是以下方法，我就不詳細講怎麼使用了，給大家簡單說一下優缺點我再總結一個最友善大家Mock資料的方法。
本地模拟資料
- 在項目裡面根據接口傳回的資料進行模拟編寫json，請求的時候請求到本地的json檔案進行資料處理。
- 優點：
- 沒有優點。
- 缺點：
- 雖然簡單粗暴了解決了Mock資料的問題，但是也隻是适用于隻有幾個接口的項目。一旦接口數量多起來，每個接口都需要去寫一套傳回參數，你不煩嗎，反正我煩了。
- 侵入前端代碼，一個合格的前端團隊是不允許有任何沒必要的代碼、注釋出現的，更别說這麼多的json檔案。
- 調用接口的時候url需要換成本地json位址，等到後端開發完成後還需要根據實際情況來進行替換，地球人都知道，一個項目的接口數不勝數，這樣不僅僅浪費了很多時間還容易出錯，我用這時間去喝個奶茶????不香嗎。
接口管理平台
- 最具代表的應該是yapi了，相信大多的前端開發者都是在這裡拿取到後端同學的接口文檔來進行開發。當然裡面也是可以進行Mock資料的。
- 優點：
- 不用侵入我們的前端代碼，在調接口的時候隻需要更換後端同學設定的Mock接口就可以。
- 接口文檔跟Mock一體化，後端同學修改了文檔後也會一并修改Mock接口。
- 缺點：
- 太依賴于後端同學了，甚至在我認識的大部分後端裡面沒有人願意去寫這個Mokc資料給前端進行調用的。
- 增加後端開發的時間，不僅要保證Mock資料的可用性還要考慮整個項目開發的進度，有這個時間也可以喝幾杯奶茶了。
- 大部分公司都不會提供這種特殊服務，項目成本逐漸提升。
請求攔截傳回假資料
- 資料攔截指的是通過模拟Http請求對相應比對的接口進行真實請求攔截，傳回模拟的資料。
- 最具代表性的應該就是Mock.js 了吧，具體怎麼使用大家可以去檢視官網喔。
- 優點：
- 不需要修改既有代碼，就可以攔截Ajax 請求，傳回模拟的響應資料。
- 讓前端攻城師獨立于後端進行開發。
- 可以随機各種參數來模拟場景，再也不用自己手寫傳回資料了。
- 缺點：
- 項目規模大，多人協作，且需求接口變更快的項目不适用。
- 需要安裝和配置，是的我把這個列為缺點了，作為一個的前端如果能為自己節省更多的時間才是一個合格的前端（我太懶了）。
????那應該用什麼？
- 有朋友可能會說了：“啊小盧哥你這一頓說，把所有方案都否認了遍，那你講了個寂寞啊，到底該用什麼呢？”
- 别急，接下來我就要給大家介紹一種API Mock的神器：Apifox!!!????????
- 相信大多數人都聽說過這個神級軟體了，如果你沒聽過，一定是你上網沖浪????♀️少了，哈哈哈開個玩笑，Apifox我也是最近才知道，但是用了之後是真香啊。
- 話說回來，這個軟體該怎麼用，成本高嗎？我告訴你：有手就行????，這次我就跟大家說一下他的Mock功能，其他功能可以去Apifox官網自行檢視喔～
導入接口文檔
- 首先可以在Apifox裡面編寫接口文檔，如果你之前沒有在Apifox編寫接口文檔也沒有關系。
- 不管你之前接口文檔是swagger還是Postman都可以導入進Apifox。
擷取Mock資料
- 接下來就用一個簡單的例子來示範一下如何使用Mock功能。
- 首先打開之前定義好的接口文檔，這時候印入眼簾頁面上會有四個tab，分别是文檔、修改文檔、運作和進階Mock。
- 在文檔中我們可以看到接口的基本資訊，包括但不限于接口的基礎資訊、請求參數、示例值、傳回值和傳回示例。
- 在修改文檔中我們可以對之前定義的接口進行調整和修改，甚至還能随機生成示例值。
- 但這些都不是我們這次API Mock想說的，我們真正需要關注的就隻有一個，那就是在運作中我們如何擷取Mock資料????。
- 打開運作頁
- 切換Mock環境
- 點選運作
- 是的你沒有看錯，這就可以了，是不是超級簡單！！????你就可以調用這個Mock接口放到你的項目裡面去調用就可以拿到根據接口文檔傳回的模拟資料啦，這樣最基本的Mock就完成了。
智能Mock規則
- 我們在修改文檔處可以看到并沒有給每一個參數都設定Mock規則，那為什麼他會自動随機生成Mock資料呢？
- 那是因為在Apifox中系統預設啟用了智能内置規則，真正的做到了零配置即可Mock 出非常人性化的資料。
- 香，真的太香了，對于我這種比較懶的人來說簡直是救星✌️。
定制Mock規則
- 這時候肯定又有小夥伴想問了：“诶小盧哥，那他可不可以自定義Mock規則呀，因為我們的資料有點特殊”。
- 當然可以，你看我上面那張圖其實就是定制了一個簡單的Mock規則，我希望參數是status的時候隻模拟0跟1出來代表狀态為停課和正常
- 我們可以建立很多你想要Mock的規則來做一個定制。
- 我們如果想要大部分使用預設的規則，而單獨個别的參數想要用規定的Mock規則我們可以在修改文檔頁面選擇對應的Mock規則。
- 至此，這次的API Mock就分享到這裡喔～關于Apifox還有很多很強大的功能，這次主題是Mock就不展開細說啦～如果感興趣的小夥伴可以去Apifox官網檢視喔～
???? 寫在最後
- 首先還是很感謝大家看到這裡，這次的文章就分享到這裡，如果有需要建議直接收藏喔~
- 作為一個前端開發，學會Mock是最基本的事情，不僅可以提高開發效率還可以把接口資訊掌握在自己的手上。
- 你不要老問自己為什麼這些東西怎麼這麼難？你要多問問自己為什麼不會，是不是沒找到方法。
- 如果您覺得這篇文章有幫助到您的的話不妨????????關注+點贊+收藏+評論+轉發????????支援一下喲~~????您的支援就是我更新的最大動力。
- 如果想跟我一起讨論和學習更多的前端知識可以加入我的前端交流學習群，大家一起暢談天下~~~