如何用vscode进行API测试与调试_集成REST Client的实战方法【教程】

9次阅读

VS Code 通过 REST Client 扩展实现 API 测试:安装后新建 .http 文件,用 Ctrl+Alt+R 发送请求;支持请求头、jsON body、环境变量、响应变量提取等完整功能。

如何用vscode进行API测试与调试_集成REST Client的实战方法【教程】

VS Code 本身不内置 API 测试功能,但通过 REST Client 扩展可直接在编辑器里发送 HTTP 请求、查看响应、管理环境变量——无需跳转 postman 或命令行。

安装 REST Client 扩展并验证是否生效

打开 VS Code 扩展市场(Ctrl+Shift+X),搜索 REST Client,安装由 Huachao Mao 发布的官方扩展。安装后重启 VS Code(部分版本需重启才加载语法高亮)。新建一个文件,保存为 test.httpapi.test.http,输入以下内容:

GET https://www.php.cn/link/4d2fe2e8601f7a8018594d98f28706f2

光标停在该行,按 Ctrl+Alt+Rwindows/linux)或 Cmd+Alt+R(Mac),若右下角弹出“Sending request…”并显示 json 响应,则扩展已正常工作。

常见问题:

  • 快捷键无效?检查是否与其他扩展冲突(如 vim 插件会劫持 Ctrl+Alt+R),可在 keybindings.json 中重映射为 rest-client.request
  • 没有语法高亮?确认文件后缀是 .http.rest,且未被其他语言模式覆盖(右下角点击语言模式,手动选 HTTP

编写带请求头、参数和 body 的 HTTP 请求

REST Client 支持完整 HTTP 协议要素,但格式严格:空行分隔 headers 与 body,headers 每行一个,body 可为 raw、JSON、form-data 等。

示例(POST JSON):

POST https://httpbin.org/post Content-Type: application/json 

{ "name": "Alice", "age": 30 }

注意点:

  • 必须用空行分隔 headers 和 body;否则 body 被当作文本 header 处理,返回 400
  • JSON body 不需要引号包裹整个对象,也不支持 JS 注释(///* */ 会导致解析失败)
  • 查询参数可直接拼在 URL 后,如 GET https://www.php.cn/link/4d2fe2e8601f7a8018594d98f28706f2?foo=bar&baz=qux&html 实体,实际写 & 即可,VS Code 会自动转义)

用 @variables 和 environments 管理多环境配置

避免硬编码 URL 或 Token,用变量 + 环境切换实现测试/预发/生产一键切换。

在文件顶部定义变量块:

@host = https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39 @token = eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... 

GET {{host}}/users Authorization: Bearer {{token}}

更进一步,使用环境(environments):

### Environment: dev @host = https://dev-api.example.com @token = dev-token-123 

Environment: prod

@host = https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39 @token = prod-token-456

Get user list

GET {{host}}/users Authorization: Bearer {{token}}

点击右下角环境名称(默认 No Environment),选择 devprod,后续所有 {{host}}{{token}} 将自动替换为对应值。

关键细节:

  • 环境块之间必须用空行分隔,且每个环境块以 ### Environment: xxx 开头
  • 变量名不能含空格或特殊字符,仅限字母、数字、下划线
  • 环境变量只在当前文件内生效;跨文件复用需用 # @include 引入公共变量文件(需启用 rest-client.enableFileVariables 设置)

调试响应与链式请求(response variables)

从上一个响应中提取字段(如 token、ID),用于下一个请求——这是调试真实业务流的关键能力。

示例(登录后获取用户信息):

### Login POST https://httpbin.org/post Content-Type: application/json 

{ "username": "test", "password": "123" }

{% client.global.set("auth_token", response.body.json().token); %}

Get profile

GET https://www.php.cn/link/4d2fe2e8601f7a8018594d98f28706f2 Authorization: Bearer {{auth_token}}

说明:

  • > {% ... %} 是响应脚本块,运行在 node.js 环境中,response.body.json() 解析响应体为对象
  • client.global.set() 写入全局变量,跨请求可用;也可用 client.environment.set() 写入当前环境变量
  • 脚本中不能使用 console.log,错误会显示在输出面板(View → Output → REST Client)
  • 若响应非 JSON,用 response.body.toString() 或正则提取,例如 response.body.match(/"id":(d+)/)[1]

真正难的是响应结构不稳定时的容错处理——比如字段可能不存在、嵌套层级变化、或返回 HTML 错误页而非 JSON。建议在脚本中加 if (response.body && response.headers['content-type']?.includes('json')) 判断,否则直接 return 避免 Cannot read Property 'token' of undefined 报错。

text=ZqhQzanResources