18 - Rest Client - HTTP 请求工具

在写网页时，前端的工程师需要了解如何与後端或是其他的第三方服务沟通，在看了文件後，除了直接实作外，另一个方式就是使用 HTTP client 设定请求来叫用这些 API 并接收回应，以此来了解该如何设定与这些 API 的沟通。

可是要使用 HTTP client 时，需要再开启另一个程序，并且每次要使用时都需要跳出编辑器的工作视窗，去另一个程序操作，十分的麻烦且不顺。

VS Code 中的 HTTP Client - REST Client

REST Client 是个 VS Code 的插件，它提供了完整的 HTTP Client 功能，使用它时，不用跳出 VS Code ，使用者直接编辑一份请求文件， REST Client 就会以这个文件上所设定的方式去请求各个 API ，并将回应直接输出在 VS Code 中，这样一来，在开发时就不用跳出编辑器，使我们可以避免切换视窗带来的损耗。

安装 REST Client

使用 code 指令安装 REST Client 插件：

code --install-extension humao.rest-client

这样一来，我们就完成 REST Client 的安装了。

使用 REST Client

要使用 REST Client 时，先新增一个副档名为 .http 的档案，档名依照使用者的喜好取名即可（例如： example.http ），接着将请求的目标 URL 输入至档案内：

https://api.github.com/users/peterhpchen

可以在 URL 的上方看到 Send Request 的按钮，按下去後，右边视窗就会出现 API 的回应结果。

除了上方的 Send Request 按钮外， REST Client 还有另外几个执行方式：

• Command-Option-R 。
• 对着 URL 按右键，选择 Send Request 。
• 使用 F1 开启 Command Palette ，然後输入 Rest Client: Send Request 。

直接设定 URL 的方式虽然简单，但却很难应对复杂的 API 请求，因此 REST Client 供使用者使用 RFC 2616 标准，来设定每个请求，如此一来，我们就可以更细部地设定像是请求方式、表头、 body 等。

POST https://api.github.com/markdown HTTP/1.1
Accept: application/vnd.github.v3+json

{
  "text": "## Hello, markdown!"
}

上例以 POST 方法叫用了 GitHub API 的 /markdown ，并加入表头 Accept 与 body 。

如果需要在单个 .http 档案中设定多个请求，可以用 ### 隔开请求，并且移动鼠标至特定请求来叫用。

https://api.github.com/users/peterhpchen

###

POST https://api.github.com/markdown HTTP/1.1
Accept: application/vnd.github.v3+json

{
  "text": "## Hello, markdown!"
}

上面就是将两个请求放在同个档案中的例子。

GraphQL 请求

想要使用 GraphQL 请求时，请在请求中加上 X-REQUEST-TYPE: GraphQL 。

POST https://api.github.com/graphql
Authorization: Bearer xxx
X-REQUEST-TYPE: GraphQL

query {
  viewer {
    login
  }
}

上例使用 GraphQL 请求 GitHub 的登入者资讯。

如果要带有参数的话，可以在请求的下方以 JSON 格式设定。

POST https://api.github.com/graphql
Authorization: Bearer xxx
X-REQUEST-TYPE: GraphQL

query($name: String!, $owner: String!) {
  repository(name: $name, owner: $owner) {
    name
  }
}

{
  "name": "dotfiles",
  "owner": "peterhpchen"
}

使用变数

REST Client 中，可以使用 @ 前缀设定变数。

@hostname = api.github.com

###

https://{{hostname}}/users/peterhpchen

记得以 ### 隔开参数与请求。

各式指令与功能

REST Client 提供许多指令，供使用者控制请求：

• 取消请求： Command-Option-K 或是 F1 後输入 Rest Client: Cancel Request 。
• 重新执行请求： Command-Option-L 或是 F1 後输入 Rest Client: Rerun Last Request 。
• 列出请求历史： Command-Option-H 或是 F1 後输入 Rest Client: Request History 。
• 删除请求历史： F1 後输入 Rest Client: Clear Request History 。
• 产生程序码片段： Command-Option-C 或是 F1 後输入 Rest Client: Generate Code Snippet 或是按右键然後选择 Generate Code Snippet 。

请求结果的功能列中有复制结果的功能，由左至右分别为：

• 储存请求结果。
• 储存请求 Body 。
• 复制请求 Body 。

本文重点整理

• 使用另一个程序作为 HTTP Client ，当在开发时，会需要在编辑器与 Client 来回切换，增加麻烦。
• REST Client 是个 VS Code 的插件，它使得开发者可以直接在编辑器中藉由建立文件的方式请求各式的服务，避免了切换所带来的损耗。
• 在文件中设定 URL 或是 RFC 2616 标准的请求，按下送出请求後就可以在另一个视窗观看结果。
• 在同个档案中要设定多个请求，可以使用 ### 隔开各个请求。
• 要使用 GraphQL 请求时，加上 X-REQUEST-TYPE: GraphQL 表头， REST Client 就会以 GraphQL 的方式进行请求。
• 使用前缀 @ 可以设定变数。
• REST Client 提供许多指令与功能供使用者使用。

参考资料

• VS Code Marketplace ： REST Client
• RFC 2616