Postman—Mock Server探索

为什么使用Mock Server

目前开发团队基本上都采用前后端分离的开发方式，后端的接口测试及前端的接口调用如果不使用工具而是相互依赖，不但失去前后端分离的意义，也给项目的开展造成阻塞。

据我所知，后端开发普遍在开发过程中会使用Postman（或其他工具）进行接口测试，而不是由前端直接配合模拟调用。所以，前端开发也应该学会使用模拟接口服务的工具（Mock Server），将接口集成的工作前置，而不是等待后端完成接口以后才进行集成。

开始使用Mock Server

Postman下载地址：https://www.getpostman.com/
登录/注册邮箱后进入首页，会弹出创建服务提示（如下图），可以直接选择Mock Server进行创建（新建服务的方法也可以点下图左上角“New+”，弹出本窗口）。
新的服务创建分为以下步骤：

第一步 创建request

很明显创建request就是创建模拟的接口，既我们在前端需要调用的接口。创建请求的要素包括访问方法（Method）、访问地址（Request Path）以及访问的响应结果（Response Body），如上图。

上图中创建了两个分别是Get和Post方法的请求，请求的接口名分别是getGoodList和setGoodName（其中{{url}}是默认的，创建服务成功后会得到一个url，这里不需修改），响应结果是JSon结果集（具体返回结果需要和后端确定返回的字段及格式）。

第二步 配置Mock Server

这里只配置了一下mock集合名称，没做其他配置。如果有需要测试私有api可以勾选上图横线的选项，但是因为前端接口暂时用不到没有研究。

第三步 生成mock服务

上图是系统自动生成mock服务后结果，其中红色框出的地址，就是第一步中{{url}}的地址，在前端调用接口的时候需要配置此地址。

关闭对话框回到主页，可以在左侧导航看到刚才创建的mock服务和request，如下图。

选择getGoodList请求，发送一个请求看看返回结果，如下图

很明显这不是我们想要的结果，原因是没有切换到对应的mock服务就调用了请求，所以404。在上图箭头指示的地方切换mock服务为GoodServic，再发送请求。

这里返回的结果就是刚才创建Request时候Response Body里配置的返回值了。接着在浏览器里测试一下URL，如下图使用mock生成的链接访问即可。

创建新的Request

上面创建mock的同时创建了两个request请求，但是如果想再创建几个其它的接口API肯定不能再创建新的mock（理论可以，但最好不要，项目中用不同的URL在后期集成时有多麻烦可想而知），所以需要在当前mock中创建新的request。

很简单，在mock服务的选项里，选择 add request，如下图：

选择后弹出request配置窗口如下图：

需要注意四个部分（上图红色框依次）：
1、Request Name：接口名，这里设置为“getGoodDetail”；
2、Request description ：接口描述，方便共享个团队其他人使用；
3、Collection or Folder：mock服务，选择在哪个服务中新建请求；
4、保存按钮：确保该请求确实是创建在“GoodService”这个服务中。

保存后在左侧导航中可以看到这个请求了，但是点开请求所有的都是空的，既没有URL也没有参数、返回值，如图：

很正常，因为创建request的时候并没有让用户输入url、参数、返回值等，所以下面要手动进行配置。

首先在右上角Example处点击，并选择add example选项（example可以翻译成实例，既这个接口有哪些访问的实例，后面会再提到具体的作用），如下图。

新建窗口跟Postman接口调用比较类似，包含名称、链接、参数、返回值等信息，如下图。

上面的“Name”要注意一下，默认是request的name，但是实际指的是example的name，这里只是系统自动默认了一个而已。然后如下图修改request的配置：

重点强调一下，红色框中的{{url}}必须加上才可以正常访问。其它参数和返回值如图配置即可。然后分别在Postman和浏览量中访问一下URL，如下图。

创建不同参数的实例

上面提到的example是request的一个子集，作用就是满足同一个request传入不同参数返回不同结果的需求。上面在getGoodDetail下面创建了getGoodDetailById这个实例，接下来再创建一个getGoodDetailById2这个实例。

创建的方法同上，只是名称和参数、返回值发生了改变，如下图。

保存后分别测试一下goodId等于1和2时的返回值，如下图：


这样就可以模拟前端用户点击不同商品返回不同详情的交互需求了。

以上是Mock Server的简答使用方法，POST请求跟GET配置一样不再重复说明。其它更高级的功能留待以后开发中遇到后再总结完善…