The workflow of web development changing rapidly nowadays. The users are preferred to build websites using JavaScript frameworks/libraries like React, Vue, Angular. While building a website on these technologies is trending, it also requires to call Rest APIs to make your applications dynamic.

Your frontend application sends the HTTP request to the backend server and gets or processed the data. To your backend server you may need to send different HTTP requests like GET, POST, PUT, DELETE. And based on these HTTP request and response your application works for the end-user.

As you need to create API endpoints it is obvious you need to test the HTTP requests. There are several tools available which allow us to test HTTP request and response. Good news is if you are using Visual Studio Code then you don’t need to use or install any other tool or software. You can test your API calls within your code editor itself. In this article, we show you how to use Rest Client extension in Visual Studio Code.

Install Rest Client Extension in Visual Studio Code

The purpose of this article is to show you how the user can test HTTP request and response within the Visual Studio Code. So at first, you need to install the extension called “Rest Client”.

Click on the “Extensions” icon and in search field type “Rest Client”. From the search result choose the package developed by “Huacho Mao” and install it.

How to Test HTTP Request and Response

In this section, we see how to send actual HTTP request and see the response. If you have your API endpoints ready you can directly apply on it. In our case, for testing purpose we take endpoints from REQ | RES.

Create a file with “.http” extension like “api.http”. You can save this file anywhere. This is just a file where you can store all your HTTP request for later use.

To send a GET request, our endpoint is https://reqres.in/api/users?page=2. So, in the api.http we will write it as follows.

GET https://reqres.in/api/users?page=2

Now if you check in the editor, you will see the line “Send Request” prepended to our statement. Click on “Send Request” it hits an API endpoint and gives you HTTP response in the next window. See the screenshot below.

It’s that much simpler. Going forward you can send POST request as below.

POST https://reqres.in/api/users
Content-Type: application/json

{
    "name": "morpheus",
    "job": "leader"
}

Of course, you don’t want to create a separate file for each request. To separate out the request, hit the enter and type “###” and then on a new line add your new request.

GET https://reqres.in/api/users?page=2

###
POST https://reqres.in/api/users
Content-Type: application/json

{
    "name": "morpheus",
    "job": "leader"
}

By this way, you can keep all your HTTP requests in a single file and easily test it. No more hustle in finding our request and then use it.

In another example, you may need to pass the token in your each HTTP request. You can do so as shown below.

POST https://reqres.in/api/users
Authorization: Bearer YOUR_TOKEN_HERE
Content-Type: application/json

{
  "user_id":5,
	"car_number":"030663",
	"car_reg_id":"217",
	"days": ["Monday", "Wednesday"],
	"booking_time": "07PM - 08PM"
}

You got the idea, right? In the same way, you can write your PUT, DELETE HTTP requests. Go ahead and give it a try. You would definitely like this extension. We would like to hear your thoughts and suggestions in the comment section below.

Related Articles

• FTP/SFTP Extension for Visual Studio Code
• How to Split the Terminal on Windows OS
• How to Use FTP/SFTP Package With Sublime Text

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.