使用 VS Code 中的 REST Client 调试 RESTful 接口

作为前端工程师，我们经常需要调试 RESTful 接口。在 VS Code 编辑器中，使用 REST Client 插件可以非常方便地完成此任务。它的特点是只要在文件夹中创建以 .http 或 .rest 为后缀的文件，便可完成 RESTful 接口调试到代码生成的全过程。

安装

在 VS Code 插件商店中搜索 REST Client 并安装即可。

基础使用

创建一个空白文件 example.http，然后编辑一个简单的 GET 请求：

# Send Request
GET https://baidu.com

点击灰色的 Send Request 文字，可以在 Vscode 窗口中看到整个 HTTP 请求的所有信息。

发送 POST 请求

# Send Request
POST https://api.cloud-wave.com/account/v4/auth/login HTTP/1.1
content-type: application/json

{
    "username": "admin",
    "password": "123456"
}

注意：header 配置信息和 post 发送的 body 数据中间必须空一格

自动生成代码

将某段调试代码用光标全选，调用快捷键 option + command + c，调出 Generate Code Snippet 界面，可以选择 Java，Python，Go 等任意编程语言，例如，选择 JS，可以在选择语言之后，会有 fetch，Axios，XMLHttpRequest 等多种编码风格，选择 fetch。一段代码片段快速生成。

Copy

fetch("https://baidu.com/", {
  "method": "GET",
  "headers": {
    "user-agent": "vscode-restclient"
  }
})
.then(response => {
  console.log(response);
})
.catch(err => {
  console.error(err);
});

不同 HTTP 协议测试

随着 HTTP2 的逐渐，在某些场景中会测试不同的 HTTP 协议的是否连通，这个在 Rest Client 中非常简单添加协议名称即可。

# Send Request
# 测试http1
GET https://baidu.com HTTP/1.1
# 测试http2
GET https://baidu.com HTTP/2

变量的编写

在实际 RESTful 接口的测试中，我们往往会编写十几个甚至几十个测试调用，在开发、测试、生产等各个环境中域名、端口、请求内容类型等配置必然各不相同，通过变量的统一编写，我们可以编写出干净、整洁、可配置的 RESTful 测试脚本。

例如，编写一个简单的开发环境案例：

@hostname = localhost
@port = 8080
@host = {{hostname}}:{{port}}
@contentType = application/json
@name = monkeyKing

###
GET https://{{host}}/authors/{{name}} HTTP/1.1

环境的切换

针对不同的环境，我们可以设置 VS Code 编辑器环境。在 .vscode 文件夹下面添加 settings.json 文件:

{
  "rest-client.environmentVariables": {
    "$shared": {
        "version": "v1"
    },
    "local": {
        "version": "v2",
        "host": "http://localhost:8000",
        "token": "tokentokentokentoken1"
    },
    "prod": {
        "host": "http://api.cloud-wave.cn",
        "token": "tokentokentoken2"
    }
}
}

通过 option + command + e 调出环境选项，随时切换环境。

私有权鉴下的 RESTful 接口调用

在实际业务开发中，开发人员为确保接口的安全，通常都会对 RESTful 接口进行权鉴管理。对于 private RESTful 接口的调用，一般分为三种类型：

Basic Auth
Digest Auth
SSL Client Certificates

Basic Auth：

GET https://api.com/userinfo HTTP/2
Authorization: Basic dXNlcjpwYXNzd2Q=

Digest Auth：

GET https://api.com/userinfo HTTP/2
Authorization: Digest user passwd

SSL Client Certificates：

{
...
"rest-client.certificates": {
    "localhost:8081": {
        "cert": "/Users/demo/Certificates/client.crt",
        "key": "/Users/demo/Keys/client.key"
    },
    "cloud-wave.com": {
        "cert": "/Users/demo/Certificates/client.crt",
        "key": "/Users/demo/Keys/client.key"
    }
}
}

扩展内容

REST Client 还支持 Mock 接口功能，可以用来模拟后端接口，方便前端开发和测试。
REST Client 也可以与其他工具集成，如 Postman 和 Swagger，实现更强大的 API 调试和管理功能。
REST Client 不仅支持 HTTP 协议，还支持其他协议，如 WebSocket 和 gRPC。