0%

REST Client 插件的使用

引言

REST Client 是一个 VSCode 插件,使我们可以直接在 VSCode 中直接发送http请求,目前我用它来代替 postman 做一些简单接口测试。

REST Client allows you to send HTTP request and view the response in Visual Studio Code directly

restClient-1

说起测试接口,大家一定会想起 postman ,那在引入 REST Client 插件之前,需要解答一个问题,难道 postman 不香么,为什么还要引入新工具? 实际上 postman 很香,只是对于一些入参简单的请求,用 postman 感觉太重了,而且如果接口数量很多,导致打开很多标签。

一直以来我也在寻找更好的方案,一个不用切换窗口的方案 – 终于在使用 VSCode 一段时间后,我找到了 REST Client 插件,初看 REST Client 插件的时候,会觉得他十分简陋,但是在使用一段时间后会发现在 REST Client 插件中已经有完成接口测试所需的大部分功能。

我总结了3点使用REST Client插件的好处

  1. 便于分享,因为是纯文本,联调时可以做为一个成果物,发给前端开发同事做为测试列表,这是我使用它的主要原因
  2. 不用切换标签,通过###分隔符,同一个HTTP文件里可以包含多个HTTP请求, 不像Postman,不同的HTTP请求需要放在不同的tab里
  3. 可以更直接的接触到http的相关知识,因为不论请求还是返回都是文本,这样可以更直接的感受到http请求的细节

相关资料

github

https://github.com/Huachao/vscode-restclient

关于安装

直接在插件商店中搜索 REST Client 安装即可

restClient-13246

简单使用

本节列出几个示例,指引大家快速入门

示例1 get请求示例

这里演示如何发送一个get请求,从该示例中你会掌握基本的用法

1
2
3
4
@IP=127.0.0.1:8083

### get 请求示例
GET http://{{IP}}/helloJson/testParam?name=hello

当一个文件的后缀名是.http 或者 .rest时,VSCode 会自动识别成接口文件

在VSCode中 用三个#号 ### 表示一个接口的开始,其下方会有一个 Send Request的按钮,当点击该按钮时会发送请求,之后会在窗口右边显示请求返回的内容

restClient-26417

示例2 post请求示例

这里演示如何发送一个post请求

1
2
3
4
5
6
7
8
9
10
@IP=127.0.0.1:8083

### post 请求示例
POST {{IP}}/authorize/register
Content-Type: application/json

{
"name": "小天",
"username": "sky"
}

注意data 与请求头之间有空行

高阶使用

其实REST Client还有很多的功能,有需求的同学可以慢慢挖掘,笔者列出了一些比较有用的高阶技巧。

示例1 变量的使用

1
2
3
4
@IP=127.0.0.1:8083

### get 请求示例
GET http://{{IP}}/pgp/helloJson/testParam?name=hello

实际上细心的你可能已经发现,在前面的简单示例中IP并没有写死,而是使用了一个变量,这样做的好处是可以快速切换环境。

当然这里的变量可以不光是变量,还可以是环境变量,其在使用方式上没有差别。

示例2 Get请求参数写成多行

1
2
3
4
### get 请求 参数写到多行示例
GET https://example.com/comments
?page=2
&pageSize=10

如果参数有很多,写在一行上不方便阅读和修改,则可以像这里一样分行写,一行一个。

示例3 添加头信息

1
2
3
### 测试 不拦截 请求头中加标记
GET http://{{IP}}/pgp/helloJson/testMap
XX-NOT-INTERCEPT:true

如果需要添加自定义的头信息可以这样添加。

示例4 添加cookie

1
2
3
### 测试 cookie
GET http://{{IP}}/pgp/helloJson/testCookie
Cookie: eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiIxNjI2MTA1NjAwIiwic3ViIjoic2t5Iiwib2ZmaWNpYWxBY2NvdW50cyI6IuWwj-mprOWQkeWJjei1sCIsImlhdCI6MTYyNjE3MTcwMywiZXhwIjoxNjI2MTcyMjAzfQ.PTzL-lw6NQb2qhQg_-q2DWmMOe-1IcpEWcKyLv2rQfQhnrJiIEnVEd0s4FKxre5qVkyfc9b40u31dvJS-ejYUg

这里演示在请求中如何添加cookie, 实际上cookie也是头的一部分,和添加头没什么区别。

示例5 代码生成

代码生成也是REST Client里一个很方便的功能,可以方便的将HTTP请求生成代码片段或者curl命令。

Generate Code Snippet

你可以方便地通过 Generate Code Snippet 命令来把HTTP请求生成出不同编程语言的代码:JavaScript, Python, C, C#, Java, PHP, Go, Ruby, Swift等等主流语言。

restClient-21529

Copy Request As cURL

也可以通过Copy Request As cURL功能将HTTP请求生成 curl 命令,这个方法在运维排错时特别有用,在运维时有可能网络不通,需要登录到内网机器执行curl命令测试接口是否正常,但也许你对curl命令不熟悉, 不能很快写出命令,则可以借助REST Client 直接生成curl命令。

restClient-128

选中接口文本–> 右键 Copy Request As cURL

restClient-25289

如下是生成的curl命令

1
2
3
4
5
curl --request POST \
--url 'http://127.0.0.1:8083/blue/sql/queryListByKeyWithParam?key=00_0005' \
--header 'content-type: application/json' \
--header 'user-agent: vscode-restclient' \
--data '{"dataType":"default","code":["001","002"]}'

总结

本节演示了REST Client的一些用法,希望大家把 VSCode 转化为一个 REST 接口测试的利器。


微信端的朋友也可关注我的公众号

小马向前走

qrcode-12cm