DAY08 - 自制MOCK API，让你开发更方便

什麽是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环境并将所有的假资料系统化地整理是一个後续更容易使用、维护的方法唷～