Vue接口调试详解（附带实例）

无论是正式数据接口，还是在线模拟数据接口、本地模拟数据接口，在请求方式为 GET 的情况下，使用浏览器打开地址都可以直接查看接口请求结果。

假如请求方式为 POST、PUT 与 DELETE 呢？仅仅利用浏览器请求似乎是没有办法对请求方式进行接口调试的，这时候就要考虑编写一定的代码了。如果接口最终的请求结果并不是我们预期的内容，那么将会耗费大量的时间与精力，这样看来效果并不理想，此时可以考虑利用前端接口调试工具进行接口的调试。

swagger接口调试

如果是 swagger 接口工具提供的接口，那么可以直接利用 swagger 本身进行接口的调试。

比如有一个“网站首页Banner列表”接口，详情页面里就有一个“Try it out！”按钮。在接口参数设置正确的情况下，可以直接点击该按钮测试当前接口，不管是成功还是失败，都可以查看对应的 Request Headers（请求头报文）、Response Body（响应主体信息）、Response Code（响应状态码）和 Response Headers（响应头报文）信息，如下图所示。


这一过程非常简洁明了，swagger 既提供了接口和接口说明，也集成了接口调试的能力。

本地接口调试

如果调试的是在线模拟数据接口或者开发人员自行构建的本地模拟数据接口，并没有通过 swagger 工具进行接口与文档的创建，那么可以利用前端接口调试工具 postman 来调试接口。

读者可自行下载 postman 工具，其官方网站有 postman 工具的下载与安装步骤，整个操作过程是傻瓜式安装处理，这里不多做讲解，读者可以按照顺序操作。

此时我们已经下载并安装了 postman 工具，打开以后可以看到有类似浏览器的访问地址，并且前面还有 GET 等请求方式供用户选择。现在打开已构建好的本地模拟数据接口首页地址“http://localhost：5000”，就可以看到接口主页，如下图所示：


/users 也进入了 json-server 本地服务接口中，打开浏览器或者利用 postman 进行接口调试可以看到用户的随机数据。

下面以 /users 接口为例来说明 postman 的用法。如果想要请求新增一个用户，则可以在 postman 中新建一个调试选项卡，将请求方式修改成 POST，将请求地址指定为“http://localhost：5000/users”，请求体 body 的数据格式指定为 JSON 格式，同时指定请求体内容为包含 name、address 和 avatar 的 json 对象，点击“Send”按钮发送请求，可以看到成功的响应体数据为包含 name、address、avatar 和 id 的 json 对象，如下图所示。


添加完数据后，可以重新打开 GET 请求的 tab 选项卡页面地址，则会发现新增数据已经被添加进去。修改数据和删除数据也是同样的道理，只不过需要确认修改数据和删除数据的请求方式和具体的 URL 路径。这里就不再截图演示了。

json-server 平台除了支持对接口进行增、删、改、查的基本操作，还支持进行多条件数据查询操作。比如，在 postman 中进行“http://localhost：5000/users？_page=1&_limit=5”接口的 GET 请求，就可以返回 json-server 本地服务分页后的数据内容。