iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

不只是串串API,新手前端30天系列 第 8

DAY08 - 自製MOCK API,讓你開發更方便

什麼是Mock API

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


為什麼需要Mock API

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

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

原本的工作流程,可能會等後端開發完成後,告訴前端,前端再拿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環境並將所有的假資料系統化地整理是一個後續更容易使用、維護的方法唷~


上一篇
DAY07 - API架構分享
下一篇
DAY 09 - 由後端主動告訴你資料更新 - websocket
系列文
不只是串串API,新手前端30天30

尚未有邦友留言

立即登入留言