How to Make REST API Calls From Inside VS Code
During development, it’s common for you to make requests to APIs. This could be to some external API or your own backend server’s API.
You can use third-party tools like Postman to perform your API calls. But a VS Code extension allows you to make API calls right from within VS Code. Here, you’ll learn how to perform API requests in VS Code.
The VS Code REST Client Extension
An extension in VS Code is a plugin or add-on that enhances the functionalities of the Visual Studio Code editor. The VS Code extensions marketplace provides several types of extensions that can help you with your programming tasks. There is an extension for adding language support. There is one for providing auto-complete for a specific programming language and so on. Extensions make it easier to program with VS Code.
The REST Client extension allows you to execute API requests from within VS Code. The extension includes the REST API editor, a visual interface that lets you query API endpoints. It accepts custom headers, query parameters, and some other parameters.
To install the REST Client, open VS Code and click on the Extensions tab. Search for REST Client and click the Install button to add it to VS Code.
Under the Details tab, you’ll find a helpful tutorial on how to use the client to make API requests. Let’s see the four common types of requests and how to make them using the REST Client extension.
We will be using JSONPlaceholder to demonstrate making API calls using the REST Client extension. It provides six common resources that you can read, edit, update, or delete by making API requests.
Making a GET Request Using the REST Client Extension
Start by creating a .http file for your API requests. You can name the file myrequests.http.
Add the following code to your myrequests.http file to retrieve a resource from the JSONPlaceholder API having 1 as its ID:
GET https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
To send the request, click the Send Request button that appears at the top of the file. A new window will open that contains the response details.
This is how you make a GET request inside VS Code.
Making a POST Request Using the REST Client Extension
You make a POST request when you want to post data to the server, typically to create a new resource.
To create a new resource in the JSONPlaceholder API, replace the code in your myrequests.http file with the following:
POST https://jsonplaceholder.typicode.com/posts HTTP/1.1
Content-Type: "application/json"
"title": "foo",
"body": "bar",
"userId": 1
Click the Send Request button to send the request. Again, this will open a new window containing the response data. The response shows an HTTP/1.1 201 Created message and the ID of the post along with other data if the API call is successful.
"id": "101"
Making a PUT Request Using the REST Client Extension
You make a PUT request when you want to update data on the server.
To update an existing resource in the JSONPlaceholder API, replace the code in your myrequests.http file with the following:
PUT https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Content-Type: "application/json"
"title": "new foo",
"body": "new bar",
"userId": 1
After sending the request, the resource will be updated on the mock server and you’ll get an HTTP/1.1 200 OK message.
Making a PATCH Request Using the REST Client Extension
You make a PATCH request when you want to modify a particular field or property of a given resource on the server.
To update only the title of an existing resource in the mock server, replace the code in your myrequests.http file with the following:
https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Content-Type: "application/json"
"title": "another foo"
After you make the request, the resource title will be updated on the mock server and you’ll get an HTTP/1.1 200 OK message along with the other data of the resource.
Making a DELETE Request Using the REST Client Extension
You make a DELETE request when you want to delete a resource on the server.
To delete an existing resource in the mock server, replace the code in your myrequests.http file with the following:
DELETE https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Here, the Content-Type is not required, and neither is the data object. If you send the request and successfully delete the resource, you should get an HTTP/1.1 200 OK response with an empty object.
Make API Calls Right From Inside VS Code
Previously, you may have used third-party tools like Postman to make API requests. While these tools do the job well, it takes time to set them up. For example, you need to have an account with Postman to use the API explorer.
Although there are several online API testing tools, but with extensions like the REST Client, testing APIs is much faster and easier. You can test any API right from inside your VS Code editor. This is especially useful if you’re developing APIs locally and want to test your local APIs on the fly.
Other API Testing VS Code Extensions
Rest Client is easy to use. But, it’s not the only VS Code extension for testing APIs. Other popular options are Thunder Client, httpYak, and httpBook.
Thunder Client provides a visual API editor to simplify API requests. Of course, you need to know what REST API is to use these tools.
