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

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

发布时间 - 2026-01-28 00:00:00 点击率：次

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

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

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

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

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

光标停在该行，按 Ctrl+Alt+R（Windows/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./link/4d2fe2e8601f7a8018594d98f28706f2?foo=bar&baz=qux（& 是 HTML 实体，实际写 & 即可，VS Code 会自动转义）

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

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

在文件顶部定义变量块：

@host = https://www./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./link/710ba53b0d353329706ee1bedf4b9b39
@token = prod-token-456
Get user list
GET {{host}}/users
Authorization: Bearer {{token}}

点击右下角环境名称（默认 No Environment），选择 dev 或 prod，后续所有 {{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./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 proper

ty 'token' of undefined 报错。

# linux # word # vscode # html # js # node.js # json # node # windows # 编码 # app # postman # if # include # Token # 全局变量 # Property

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何安全递归删除目录树（即使包含只读文件）

下一篇：怎样利用VSCode_进行多语言的智能补全【教程】

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何安全递归删除目录树（即使包含只读文件）

下一篇：怎样利用VSCode_进行多语言的智能补全【教程】