接口调试是前端开发过程中必须要面对的问题,虽然网络上有着层出不穷的调试工具,但是我相信大家用过最多的还是Postman,以至于后来还出现了PostWoman。
但是熟悉Postman的开发人员我相信对他是既爱又恨。
Postman 限制
1. 高级功能要付费
API 调试是可以的,但是如果你要编辑,版本控制使用团队共享功能,会不方便。
使用 Postman 付费版本,但这意味着你需要付费,并且你所在的所有团队都需要使用 Postman ,大家都需要付费,你能让别人去付费???
2.额外的软件,占用了宝贵的RAM资源
额外的软件当然会占用我们宝贵的RAM资源,这对于我们开发人员来说是绝对不能容忍的啊。
3.这真的不爽
相信VS Code这个开发神器是被越来越多的开发人员接受,丰富的可扩展性,稳定的性能等等这些优点,不得不说确实是微软的良心之做。如果我们在全神贯注地用VS Code开发时,遇到了REST API的需求,此时如果我们还需要打开另一个软件(Postman)去调试,是不是有种亚麻吃黄莲,有苦说不出的感觉~
REST Client特点
使用REST Client
1.安装 REST Client 插件
2.创建一个 .http 或 .rest 文件
3.测试接口
POST https://example.com/comments HTTP/1.1
content-type: application/json
{
"name": "sample",
"time": "Wed, 21 Oct 2015 18:27:50 GMT"
}
4.发送请求,测试接口
准备请求后,请单击请求Send Request上方的链接,或使用快捷方式Ctrl+Alt+R(Cmd+Alt+R适用于macOS),或在编辑器中单击鼠标右键,然后Send Request在菜单中选择,或按F1,然后选择/键入Rest Client: Send Request,响应将在Visual Studio Code的单独的Webview面板。如果您想充分利用Visual Studio Code中的搜索,选择或操作功能,还可以通过将设置为来预览无标题文档中的响应。发出请求后,等待的旋转图标将显示在状态栏中,直到收到响应为止。您可以单击旋转图标以取消请求。之后,该图标将被替换为总持续时间和响应大小。rest-client.previewResponseInUntitledDocumenttrue
您可以将鼠标悬停在状态栏中的总持续时间上,查看响应时间的细分,还可以查看Socket,DNS,TCP,First Byte和Download的持续时间详细信息。
将鼠标悬停在状态栏中的响应大小上时,您可以查看header和body的细分响应大小详细信息。
REST Client Extension中的所有快捷方式仅适用于文件语言模式http和plaintext。
5.自定义环境变量
点击 Code => Preferences => Settings 打开设置,切换到 Workspace Settings ,配置 settings.json 文件:
"rest-client.environmentVariables": {
"$shared": {
"version": "v1",
"prodToken": "foo",
"nonProdToken": "bar"
},
"local": {
"version": "v2",
"host": "localhost",
"token": "{{$shared nonProdToken}}",
"secretKey": "devSecret"
},
"production": {
"host": "example.com",
"token": "{{$shared prodToken}}",
"secretKey" : "prodSecret"
}
}
http下面列出了上述环境变量在文件中的用法示例,请注意,如果切换到本地环境,version则将是v2;如果切换到生产环境,version则将是从$ shared环境继承的v1:
GET https://{{host}}/api/{{version}}comments/1 HTTP/1.1
Authorization: {{token}}
更多功能:https://marketplace.visualstudio.com/items?itemName=humao.rest-client
总结
习惯了Postman ,但REST Client 确实是一个不错的工具,对于VS Code的忠实粉丝来说更是无可替代,。毕竟平时在进行协作开发时,在项目中增加一个 .http 接口请求文件,确实比重新打开一个软件要方便的多。