使用Thunder Client在VSCode内测试API接口

Thunder Client是vscode中的轻量级API测试工具,集成请求发送、环境变量管理与自动化测试功能,支持创建GET、POST等请求,配置Headers与jsON请求体,利用环境变量切换不同配置,将请求归类至集合便于管理,并通过javaScript断言实现简单响应验证,提升开发调试效率。

使用Thunder Client在VSCode内测试API接口

在VSCode中使用Thunder Client测试API接口是一种轻量又高效的方式,尤其适合不需要启动完整postman应用的开发场景。Thunder Client作为VSCode插件,集成了http请求发送、环境变量管理、测试脚本等功能,让你在编码的同时快速调试后端接口。

安装与启动Thunder Client

打开VSCode,进入扩展市场(Extensions),搜索“Thunder Client”。找到由Rangav团队开发的Thunder Client并安装。安装完成后,侧边栏会出现一个闪电图标,点击即可打开Thunder Client界面。

无需额外配置即可开始使用,界面简洁,包含Collections(请求集合)、Requests(请求)和Environments(环境变量)三个主要模块。

创建并发送第一个请求

点击“New Request”按钮创建新请求,输入名称后进入请求编辑页面。你可以:

  • 选择请求方法(GET、POST、PUT、delete等)
  • 在URL栏输入目标接口地址,例如 https://jsonplaceholder.typicode.com/posts/1
  • 点击“Send”按钮发送请求

响应结果会立即显示在下方面板中,包括状态码、响应时间、返回数据(支持json格式化展示)。

设置请求头与请求体

对于POST或PUT请求,常需设置请求头和请求体。

在Headers标签页中添加键值对,如:

  • Content-Type: application/json
  • Authorization: Bearer your-Token

切换到Body标签页,选择“raw”并输入JSON数据:

{ “title”: “测试文章”, “body”: “这是通过Thunder Client提交的内容”, “userId”: 1 }

再次点击Send,即可将结构化数据发送至服务器。

使用环境变量管理不同配置

Thunder Client支持多环境管理,适合开发、测试、生产等不同阶段。

使用Thunder Client在VSCode内测试API接口

面试猫

AI面试助手,在线面试神器,助你轻松拿Offer

使用Thunder Client在VSCode内测试API接口 39

查看详情 使用Thunder Client在VSCode内测试API接口

点击顶部“Environments” → “Add Environment”,命名如“development”,然后添加变量:

  • api_base_url = http://localhost:3000
  • token = abc123xyz

在请求URL中使用变量:{{api_base_url}}/users,Thunder Client会在发送时自动替换为实际值。切换环境只需顶部下拉选择,极大提升效率。

保存请求到集合与重复使用

将常用请求归类到Collection中便于管理。例如创建名为“User API”的集合,把注册、登录、获取用户等请求放入其中。支持嵌套子集合,适合大型项目。

所有数据默认同步到本地,也可通过“Share”功能导出为JSON,方便团队协作。

基本自动化测试支持

Thunder Client支持在请求后运行简单测试脚本,验证响应是否符合预期。

在Tests标签页中编写javascript断言,例如:

pm.expect(res.status).toBe(200); pm.expect(res.body).toHaveProperty(‘id’); pm.expect(res.time).toBeLessThan(1000);

发送请求后自动运行这些检查,结果会在Tests面板中显示,帮助快速发现接口异常。

基本上就这些。Thunder Client虽不如Postman功能全面,但在VSCode内完成日常接口测试已绰绰有余,省去切换应用的麻烦,提升开发流畅度。

上一篇
下一篇
text=ZqhQzanResources