建立 Mock Server 後，前端工程师就失去耍废时间不需要等後端做好才能串接。

前端工程师心里 OS：「其实我是想要空等的。」

大纲

1. 在正式 API 完成前，如何让未来要串接的工程师不要空等？

   • 1.1 面试官为什麽会问？
   • 1.2 面试官想从答案确认什麽？
   • 1.3 笔者提供的简答

2. 回答问题所需具备的知识

   • 2.1 Mock Server 是什麽？学它有什麽好处？
   • 2.1 用 Postman 建立 Mock Server
   • 2.3 设计 Mock Server Response
   • 2.4 设定 Environment 让你快速切换执行环境
   • 2.5 汇出 API documentation 给同事使用指引
   • 2.6 让 Mock Server 变成私有的

1. 在正式 API 完成前，如何让要串接的工程师不要空等？

1.1 面试官为什麽会问？

这问题是想了解你现在的工作是如何运行的，因为许多专案都采取前後端分离的架构，前端常常要等後端完成後才能串接，如果後端提供的服务不稳定，又或是没按造需求规格开发就容易导致前端空等。

1.2 面试官想从答案确认什麽？

• 你现在工作时，前端与後端是如何协作的
• 你有用什麽工具，让前端不用等你写完 API 就能提前串接
• 你有提供什麽文档供前端串接时参考
• 如果回答的是某个工具（ex：Postman），会再详细询问有使用到工具的哪些功能

1.3 笔者提供的简答

我会先依照需求规格整理出一份让双方共同遵守的开发文档，同时使用第三方验证工具「Postman」建立 Mock Server，并根据 Request 的参数给予对应的 Result 结果，让前端不需要等後端 API 完成後才能开始串接的作业。

2. 回答问题所需具备的知识

市面上提供 Mock Server 以及产生 API doc 的工具很多，不过「Postman」是笔者用起来最顺手的；Postman 除了 API 的基础测试外，还有许多加速工作效率的功能，就让我们透过这篇文章让自己的 Postman 更专业吧！

2.1 Mock Server 是什麽？学它有什麽好处？

在前後端分离的架构下，前端在完成网页版面布局後，需等待後端完成 API 才能做後续的开发；为了不让前端在这段时间偷懒苦等，Mock Server 应运而生！它能回传自订的资料结构供前端使用，等後端完成 API 後，前端只需要切换网址就能使用真实资料。

除了上面的原因外，如果你开发环境的後端 Sever 不太稳定常常罢工，Mock Server 也能保证你的工作效率不受影响，毕竟不可能每次都等到 Server 修好後再工作吧？

2.2 用 Postman 建立 Mock Server

Postman 改版非常快速，你看到的画面可能跟我有些许不同

• STEP 1： 建立 Mock Server

  1. New > Mock Server
     

  2. Create a new Collection > input url > Next
     如果不是选择已经存在的 API Collection，就需要至少填写一个 Request URL 让 Collections 有初始化的 API Request
     

  3. 给 Mock Server 取个名字，并建议你勾选储存 mock server URL 到环境变数的选项。
     

• STEP 2： 检查 Mock Server 是否建立成功

  1. 建立成功後便可以在「Mock Servers」的分页中看到刚刚建立的 Server，点进去後能看到这个 Sever 的网址。
     

  2. 接着我们到「Environments」的分页确认，mock server URL 是否有储存到环境变数，
     

2.3 设计 Mock Server Response

在 Mock Server 建立後，我们要设计不同 API Request 回传的资料结构。

• STEP 1：先用 Request 的 Default example 来了解使用方式

  1. 到「Collections」的分页找到刚刚初始化的 Request， {{url}}会带入环境变数所以右上角请选择刚刚建立的「Mock_User」，按下「Send」後你会发现下面的 Response 一片空白，这是因为我们还没设定 Mock Server Response。
     
  2. 在左侧 Request 下面有一个「Default」，它就是用来自订 Response 资料结构的 example，这边我们用 JSON 格式写个简单的 Response example 後按「Save」。
     
  3. 回到刚刚的 Request，按下「Send」後会发现 Response 的资料结构跟刚刚填写的范例相同。
     

• STEP 2：新增其他的 Response example

  1. 除了最初的 Default 外，我们还可以自己新增其他的 Response example。
     

  2. 可以透过加入 Params 让这个 Request 有不同的 Response，这里我们新增「error」、「correct」这两个 example 并加入「control_res」这个 Params 来做示范。

     在「DESCRIPTION」填写的资讯会显示在 API 文件上，写清楚一点不但方便自己记忆，也更容易让合作者了解。

     

  3. 回到刚刚的 Request ，我们在「control_res」填入不同的 VALUE，按下「Send」就会看到对应的 Response 噜～
     

2.4 设定 Environment 让你快速切换执行环境

这是 Postman 重要的功能之一，它可以加快开发速度，让你不用为每个环境都建立一个 Request。

• 如果没设定会发生什麽蠢事？
  
  有没有觉得上面这张图片看起来很蠢，在了解 Environment 怎麽设定前，我的 Collections 就是这麽的复杂；因为开发时通常环境会分成：「Local、Dev、QA、Prod」，如果每新增一个环境你就复制一份，到最後你会无法进行妥善管理。

• STEP 1：新增 Environment
  之前在建立 Mock Server 时其实就已经用到了 Environment，这里我再详细的跟大家说这个东西的好处。
  请先到「Environments」的分页按下「＋」的按钮，接着输入名称来新增环境（我用 local_server 做示范）。
  

• STEP 2：设定常用的 Environment variables

  • url
    这个是最实用的环境变数，让你只需要调整 Request 的 Environment 就快速切换网址做测试。
  • login_user、login_password
    每个环境的使用者登入资讯通常略有不同，且大部分的 API 都需要透过登入取得 token 才能使用，把他们加入环境变数可以加速你的测试。

    警告：不建议把正式机的 password 加入环境变数，且测试机的 password 不要用平常自己会用的密码，不然资安很危险的，都已经可以偷懒用 Environment，密码自己去产生一组吧。

  

• STEP 3：在 Request 使用 Environment variables
  想在 Request 中使用 Environment variables 只需要用 {{your_env_var}} 包起来就好，另外右上角记得要切换到正确的 Environment 才会带入相应的资料喔！
  

2.5 汇出 API documentation 给同事使用指引

相信後端工程师有一个共同经验，无论你的 API 文件写得再清楚、功能执行的再稳定；到了同事手中却常常被说不能 Work，紧张的你检查很多遍也找不出问题，百思不得其解的抵达同事座位後，才发现他原来漏了某个参数。

如果你有这样的经验，Postman 内建的 API documentation 能拯救你，让你在 Publish 文件後可以跟同事幸福快乐的生活。

• STEP 1：View documentation
  选择想要产生文档的 Collection，按下「View documentation」後文档就会显示在右侧，你可以透过切换右上角的环境变数来检视文档。
  

• STEP 2：Publish documentation

  1. 当你确定文档内容都没问题後按「Publish」。
     
  2. 接着会要你调整一些参数，调整完後建议先用左侧的「Preview Documentation」自己确认看看是否符合。
     
  3. 确认一切都没问题後按下「Publish Collection」就发布出去噜～
     

• STEP 4：Share API Doc URL
  你可以将 URL 复制起来分享给你的合作夥伴，如果你想把这份文档下架，按「Unpublish」即可。
  

2.6 让 Mock Server 变成私有的

前面在建立 Mock Server 时，不知道有没有人注意到「Make mock server private」的选项，在做这个设定前 Mock Server 的 URL 都是公开的，如果你想为自己的 Mock Server 多一层防护可以跟着下面步骤操作：

• STEP 1 : 编辑 Mock server
  1. 在「Mock Servers」分页打开之前创建的 Server，按下「Edit」。
     
  2. 将「Make mock server private」打勾并按下「Save changes」。
     
  3. 回到之前的 Request，你会发现按下「Send」後会回传错误讯息，这是因为现在 Mock Server 都需要添加 API key 到 Request 的 Header 才能使用。
     
• STEP 2 : 产生 Postman API key
  1. 进去这个 网址 ，点击「Generate API key」。
     
  2. 填上用来识别这个 API key 的名称後按下「Generate API key」。
     
  3. 接着请复制这个 API key，上面已经警告你这是唯一见到它的机会了。
     
• STEP 3：将 API key 加入 Environment
  因为日後 Mock Server 的所有 Request 都需要这个 API key，所以我们把他加入 Environment，变数名称为「x-api-key」。
  
• STEP 4：在 Request 的 Header 加上 x-api-key
  最後回到 Request，在 Headers 的分页下加入「x-api-key」这个参数并将环境变数 {{x-api-key}} 作为值，最後按下「Send」就能看到正确的 Response 回传噜！
  

感谢大家的阅读，如果喜欢我的文章可以订阅接收通知；如果有帮助到你，按Like可以让我更有写文的动力，我们明天见～

参考资源

1. 让你的 Postman 更专业(笔者部落格)

我在 Medium 平台 也分享了许多技术文章
❝ 主题涵盖「MIS & DEVOPS、资料库、前端、後端、MICROSFT 365、GOOGLE 云端应用、自我修炼」希望可以帮助遇到相同问题、想自我成长的人。❞