什麼是Mock API

Mock(模擬)這個詞，其實源自於單元測試。主要的概念就是先省略中間的複雜情況，模擬真實的結果物件。而同理，Mock API就是先不管真實邏輯或資料處理，直接以模擬的方式給予一樣格式的假資料(Mock Data)，回應給前端。

為什麼需要Mock API

為什麼需要Mock API呢？ Mock API又有什麼好處？

優點１ 節省前後端開發的時程

原本的工作流程，可能會等後端開發完成後，告訴前端，前端再拿API來試試看有沒有規格上的問題或正式開工串接。但這樣的流程前端就必須等待後端。如果用了Mock API，先定義好雙方溝通的規格後，前後端各自那著這個討論好的規格開發，那就可以雙方同時開工，增進整體時程的效率。

優點2 前端測試方便度大幅提升

透過Mock API，前端可以很快速的改變自己需要的資料。更方便的測試前端需要的狀況。EX.透過取得書本列表的API，當狀態是'Borrowed'，書本列表畫面要是橘色的點；當狀態是'Available'時，書本列表畫面是綠色的點。如果要用真的API的話可能就必須要在從後台建立資料，設定不同狀態，但透過Mock API，只需要複製資料並簡單的修改數值，就可以取得所需的不同狀態資料。

優點3 降低前端被後端影響的程度

前端在開發的同時，後端也有可能在開發呀！如果後端開發到一半不小心把東西改壞了，或正在調整某個東西這個API不能使用，難道前端就要等後端修好才能接著開發嗎？這樣也太被牽制了吧，相信各位前端大大都不喜歡吧XD 有了mock API之後，API response決定權就會在前端了，各位就不用被後端牽制了，後端大大改壞也可以慢慢修囉～

OK，知道了為什麼後，我們來看看怎麼快速的建立Mock API吧～～
其實Mock API現在也有很多工具可以使用，像是stoplight、MSW（Mock Service Worker）這些Mock Server。不過今天我們要分享的不是這些第三方工具，而是自己在程式中間可以做到的Mock的簡單架構!

自己建立Mock API 環境

如何簡單快速的建立Mock，不同開發環境可能用不同的做法，以下以vue.js的架構做範例介紹。

step1. 建立mock環境 - 將可以啟用mock環境的設定配置到專案中

1-1.建立mock環境檔案.env.mock

1-2.在package.json中，加上新的script指令，讓在開發serve時，可以啟用mock環境

step2. 建立一個mock API引用位置 - 在/public的資料夾中建立一個/mock資料夾

在一個可以被引用路徑的位置，建立存放mock API的資料夾。在vue的架構中，我把這個位置放在/public資料夾之下

step3. 建立mock API 檔案(json檔) - 根據不同的API response建立mock .json檔案

Ex. 建立一個 mock api的json檔案（如下圖的 apiBookList.json），裡面的內容就是和後端溝通好的規格

step4. 在api管理檔案中，建立一個新的mock環境，調整路徑 - 打開關於管理api路徑、基礎設定等的檔案，加入mock環境判斷，並把路徑改成取得位置改為對應的mock api json檔案

透過step1設定的mock環境變數判斷目前現在的環境，如果現在環境為mock的話，便在取得api response的共用function路徑，改為取得mock api json檔案

step5. run看看你的mock環境 - npm run serve-mock

最後我們只有使用 npm run serve-mock，將剛剛package.json中設定的以mock環境serve開發，就大公告成囉～～

你可能會想：「阿不就用一個變數就好了把response複製到這個變數就好？」
這樣做也不是不行，只是之後程式會變得很亂，而有不同地方呼叫到香同API時，又要分開給這個response變數。其實這整個Mock API的概念就是把response變成變數，只是更系統化地進行。統一建立一個mock環境並將所有的假資料系統化地整理是一個後續更容易使用、維護的方法唷～