REST Clientを用いてVisual Studio Codeで直接HTTPリクエストを送信・レスポンスを表示する

はじめに

今回はVSCodeの拡張機能の一つであるREST Clientを紹介したいと思います。

REST Client allows you to send HTTP request and view the response in Visual Studio Code directly. It eliminates the need for a separate tool to test REST APIs and makes API testing convenient and efficient.

// DeepL翻訳
REST Clientは、Visual Studio Codeで直接HTTPリクエストを送信し、レスポンスを表示することができます。REST APIのテストに別途ツールを用意する必要がなく、APIテストを便利かつ効率的に行うことができます。

github.com

はじめに
インストール
使い方
参考

インストール

VSCodeのタブバーより拡張機能を選択し、REST Clientを検索しインストールを行います。

使い方

今回は実験としてhttpbinというシンプルなHTTPリクエストとレスポンスを返してくれるサービスを利用していきたいと思います。
https://httpbin.org/

.httpか.restファイルを作成する

REST Clientは.httpか.restファイルに対して利用できます。

書き方に関しては標準的なRFC2616に従うそうです。
www.w3.org

GETリクエストを記述してみる

GETリクエストを送るサンプルとして、Sample.httpというファイルを生成して以下を記述してみました。

GET http://httpbin.org/get HTTP/1.1

また省略して以下のように書くこともできます。

http://httpbin.org/get

リクエストを送信する

簡単な方法としては、リクエストの上にあるSend Requestを選択することでリクエストを送信することができます。

またショットカットとしてCtrl+Alt+R (macOSではCmd+Alt+R)を押す方法や、F1 -> Send Requestを選択する方法もあります。

POSTリクエストを記述してみる

次にPOSTも試してみます。

POST https://httpbin.org/post HTTP/1.1
content-type: application/json

{
    "id": "Hoge",
    "password": "Fuga"
}

1ファイルの中に複数のリクエストを記述する

###を利用することで複数のリクエストを同一ファイルに記述することができます。

GET http://httpbin.org/get HTTP/1.1

###

POST https://httpbin.org/post HTTP/1.1
content-type: application/json

{
    "id": "Hoge",
    "password": "Fuga"
}

ただし同時にリクエストが送られるわけではないので注意してください。