使用 Rest Client 优雅地发送 HTTP 请求

3,516 阅读1分钟

1. Rest Client(后文将使用 RC 来简化书写) 是一款 VSCode 插件,可以方便高效的发送 HTTP 请求并查看响应。

image.png

2. RC 支持的文件扩展名为 .http 与 .rest。故使用 RC 的第一步是创建正确扩展名的文件,例如 example.http。

3. 发送 GET 请求,有两种写法。多个请求使用 ### 进行分割(通用)

https://example.com/comments/1 

###

GET https://example.com/topics/1 HTTP/1.1

4. 发送 POST 请求

POST https://example.com/comments HTTP/1.1
content-type: application/json

{
    "name": "sample",
    "time": "Wed, 21 Oct 2015 18:27:50 GMT"
}

5. POST 请求的方法体,也可以是文件路径,以 < 开头

POST https://example.com/comments HTTP/1.1
Content-Type: application/xml
Authorization: token xxx

< ./demo.xml

###

POST https://example.com/comments HTTP/1.1
Content-Type: application/xml
Authorization: token xxx

< C:\Users\Default\Desktop\demo.xml

6. 查看最近50个请求(Request History)

Ctrl + Alt + H(Cmd + Alt + H for macOS)

7. 使用变量,定义变量时以 @ 开头

@hostname = api.example.com
@port = 8080
@host = {{hostname}}:{{port}}
@contentType = application/json
@createdAt = {{$datetime iso8601}}
@modifiedBy = {{$processEnv USERNAME}}

###

@name = Strunk & White

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

###

PATCH https://{{host}}/authors/{{%name}} HTTP/1.1
Content-Type: {{contentType}}

{
    "content": "foo bar",
    "created_at": "{{createdAt}}",
    "modified_by": "{{modifiedBy}}"
}

8.使用环境变量,在 vscode 的设置文件 settings.json 进行配置

image.png

image.png

"rest-client.environmentVariables": {
    "$shared": {
        "version": "v1",
        "prodToken": "foo",
        "nonProdToken": "bar"
    },
    "local": {
        "version": "v2",
        "host": "localhost",
        "token": "{{$shared nonProdToken}}",
        "secretKey": "devSecret"
    },
    "production": {
        "host": "example.com",
        "token": "{{$shared prodToken}}",
        "secretKey" : "prodSecret"
    }
}

9. 将请求转化为代码片段(Generate Code Snippet)

Ctrl + Alt + C(Cmd + Alt + C for macOS)

10. 获取其他请求返回体的值为变量(摘录:VSCode的REST Client指南,超好用的HTTP客户端工具

设想我们经常遇到的一个场景,先通过 login 请求来获取 Token ,然后再把拿到的 Token 作为请求头发送其它请求。这个 Token 肯定是每次登陆都不一样的,如果每次都要获取,然后复制,再粘贴到后面请求中,就会非常麻烦。RC 为这种场景提供了便利的办法,我们来看看怎么使用吧:

先通过登陆请求获取Token:

###
# @name loginAdmin
POST http://{{hostname}}/auth/login HTTP/1.1
Content-Type: application/json

{
    "username": "pkslow", 
    "password": {{password}}
}

我们添加多了一行,使用这样一个特殊注释,来给请求定义一个名字

# @name loginAdmin

如果返回体的内容如下:

eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJwa3Nsb3ciLCJyb2xlcyI6WyJST0xFX0FETUlOIl0sImlhdCI6MTYyMjI3OTMxMCwiZXhwIjoxNjIyMjc5OTEwfQ.h-fwUEOPx_tttlBOR8cXMHJWy2n6ath7lTqzfdAX87c

意味着我们要引用返回的所有内容,如下:

### 
@token = {{loginAdmin.response.body.*}}
GET http://{{hostname}}/admin HTTP/1.1
Authorization: Bearer {{token}}

通过{{loginAdmin.response.body.*}}来引用变量。格式如下:

{{requestName.(response|request).(body|headers).(*|JSONPath|XPath|Header Name)}}

如果返回体的内容如下:

{ "token": "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJwa3Nsb3ciLCJyb2xlcyI6WyJST0xFX0FETUlOIl0sImlhdCI6MTYyMjI3OTMxMCwiZXhwIjoxNjIyMjc5OTEwfQ.h-fwUEOPx_tttlBOR8cXMHJWy2n6ath7lTqzfdAX87c" }

就通过{{loginAdmin.response.body.$.token}}来引用变量。