Often times you’ll need to make quick REST calls to connect or to test your APIs. There are a few REST Clients available (like Postman, Insomnia) for download, however wouldn’t it be cool if we can script these requests from VSCode, alongside your other code, without leaving the editor? This is where the REST Client for VSCode comes in handy.

Let’s explore how to make REST calls from VSCode using the REST Client extension.

Prerequisites Link to heading

For this exercise we’ll use SpaceX’s API to query on latest launches and core information. Cool thing about this API is it’s open - in the sense that there is no need to authenticate to make these API calls, which is perfect for our exercise. Also, for obvious reasons, this api endpoint only allows GET calls.

API Reference Link to heading

REST Calls Link to heading

REST Client and HTTP Language Link to heading

Launch VSCode, create a new file, set Language Mode for this file to “http”. You can do this via the command panel - Cmd + Shift + p (mac) OR Ctrl + Shift + p (windows), then type Language Mode, then select http.

Alternatively, you can save this newly created file with an .http or .rest extension, the language mode will then be set to http automatically.

Defining Variables Link to heading

REST Client extension support two types of variables - Custom Variables and System Variables.

System Variables are some helper variables provided by REST Client. Syntax is {{$SysVariableName [options]}}. {{$guid}} and {{$datetime rfc1123}} are examples of system variables. More info here.

Custom variables are further divided into Environment Variables, File Variables and Request Variables.

  • File Variables These are standalone variables, the syntax is @varName = varValue, must be in a single line, spaces are NOT allowed in variable name. Usually defined at the top of the file.
  • Request Variables You can think of request variables as attaching a name to your request. These are scoped to a single request and are defined just before the request url. The syntax is // @name requestName or # @name requestName. Request variables are cool because you can refer these in other requests to extract data from the response. Refer here for more info.
  • Environment Variables in this context, Environment variables are variables that are defined as key-value pairs, and are saved in a VSCode settings file. These are useful when you need to test the same calls on multiple environments for e.g. on dev or test environments. Refer here for more info.

To define a request url, start with the REST method (GET, PUT, POST, DELETE etc.,) followed by the url. Request headers can be defined in a separate line right below the request url in format Header-Name: Header-Value. You can send payload with your request by adding a blank line after the headers, followed by the payload.

Here’s an e.g.

# My Variables
@contentType = application/json
@token = ikvwwqea5zikvasdfasdfwwqea5zi2swrTEEd

### GET Request
GET https://chroniclingamerica.loc.gov/suggest/titles/?q=manh
Content-Type: {{contentType}

### POST Request
POST http://localhost:3000/
Content-Type: {{contentType}
Authentication: Bearer {{token}}

{
    "id": "k123412341234",
    "name": "Samwell",
    "dept": "Citadel"
}

Scripting calls for SpaceX API Link to heading

We know that the base URL for all SpaceX’s api calls is https://api.spacexdata.com/v3 from here.
Let’s define a file variable named baseurl so this variable can be used in every request and we can add the suffixes to the baseurl as needed.

for latest launches request url would be GET {{baseurl}}/launches/latest
to get all cores the request url would be GET {{baseurl}}/cores
to get info on a single core url is GET {{baseurl}}/cores/{{coreid}}

you could either define coreid as another file variable OR you could extract coreid from the response of request GET {{baseurl}}/cores, provided this request is named. Cores request url returns an array or cores.

As request variables support both JSONPath and XPath for quering the response we could query coreid, using JSONPath syntax, like so

@baseurl = https://api.spacexdata.com/v3

### Get Cores
# @name cores
GET {{baseurl}}/cores

### Get Single Core
@coreid = {{cores.response.body.$[0].core_serial}}
GET {{baseurl}}/cores/{{coreid}}

Here’s the full implementation with all request urls

@baseurl = https://api.spacexdata.com/v3

### Get Latest Launches
GET {{baseurl}}/launches/latest

### Get Upcoming Launches
GET {{baseurl}}/launches/upcoming

### Get Cores
# @name core
GET {{baseurl}}/cores

### Get Single Core
@coreid = {{core.response.body.$[0].core_serial}}
GET {{baseurl}}/cores/{{coreid}}

REST Client inserts a hyperlink with name Send Request above every request url, clicking on this hyperlink makes the request and the response is displayed in another split window, which is find pretty neat.

NOTE: Individual requests in a .http file should be separated by ### directive/comment line, else you will not see the Send Request hyperlink

REST Client

Here is another example with more REST methods covered (GET, PUT, POST, DELETE)

Alongside from being not only simple to script REST calls in a text file with this extension, it also helps sharing these calls (and further building upon these) with your team.

Hope you enjoyed learning this.