Calling REST APIs From the IDE : VSCode

# Index

* Overview
* Get Started
* How to Use REST Client?
* GET, POST, PUT, PATCH, DELETE
* Why should we use a REST client extension?

## Overview
**For those who seek efficiency and ease in everything they do**, this is the solution you need. In this article we will learn, how to make a APIs call from the your favourite IDE, i.e., Visual Studio Code. 

Developers use a lot of URLs: your app URLs, URLs for consumed services, etc. These URLs, and sometimes their payloads may differ per environment. And as a dev you are going to constantly hit them. Developers have relied on utilities outside the IDE to track the URLs, send test payloads to the URLs, and inspect the  response. Now you can do all of that from your IDE! 

To do this we’ll use the [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) extension for [Visual Studio Code](https://code.visualstudio.com/Download) and [Dummy Rest API](https://reqres.in).


## Get Started
If you haven't installed the [Visual Studio Code](https://code.visualstudio.com/Download) then please install.

If you already have Visual Studio Code installed then 
Install the [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) extension for Visual Studio Code.
Open your VS Code and search for "REST Client".
![Screen Shot 2022-06-30 at 17.21.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/f048c653-5348-6de5-d620-1e06cc376191.png)


Click here to Install the extension.
![Screen Shot 2022-06-30 at 17.22.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/108da316-0be2-cd39-2897-d4f475b45c5f.png)

After successfully installed, it looks like below.
![Screen Shot 2022-06-30 at 17.23.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/6981a326-26fe-c083-8fb2-bd874e8c0611.png)

So, you have done with your ENV setup.

## How to Use:
Let's create a new file with the extension ".http" or ".rest". Here I used ".http".
![Screen Shot 2022-07-01 at 10.30.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/9ec3a144-7926-278d-91de-a9dd06d952cc.png)

## GET
Let's make our first call.
As soon as you save, you’ll see a Send Request button appear right after the ###.

![Screen Shot 2022-07-01 at 9.21.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/3c0e373a-36a9-fc0c-439a-27e10a95c33c.png)

***Response:***
![Screen Shot 2022-07-01 at 9.22.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/51be4bab-8883-ef00-bcce-2fc9178804a1.png)

That’s it! No need to open a web browser, debug tools, networking, and then inspect responses- it’s all right there!

***Code:***

```
###
Send Request
GET https://reqres.in/api/users/ HTTP/1.1
Content-Type: application/json
```


What is the **HTTP 1.1**?
HTTP 1.1 is the latest version of Hypertext Transfer Protocol (HTTP), the World Wide Web application protocol that runs on top of the Internet's TCP/IP suite of protocols. HTTP 1.1 provides faster delivery of Web pages than the original HTTP and reduces Web traffic. 

For more details, please visit [here](https://www.techtarget.com/whatis/definition/HTTP-11)

## POST
Doing a POST request follows the same pattern but its slightly different as you need to provide the payload and optionally the content-type (along many options in the docs of REST Client like authentication).

![Screen Shot 2022-07-01 at 9.26.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/a5c87b5d-08e5-a7c2-393c-799e2fd07f13.png)


***Response:***
![Screen Shot 2022-07-01 at 9.26.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/c6a3d95d-5d2d-7f54-3777-2285fe6020ce.png)


***Code:***

```
###
Send Request
POST https://reqres.in/api/users HTTP/1.1
Content-Type: application/json

{
    "name": "Alok",
    "job": "PM"
}
```



## PUT
![Screen Shot 2022-07-01 at 9.33.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/7d4d2e27-1322-c621-55de-f71ee593e6ec.png)


***Response:***
![Screen Shot 2022-07-01 at 9.33.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/31841b81-f36a-5ed3-ec2e-816670f2ed00.png)


***Code:***

```
###
Send Request
PUT https://reqres.in/api/users/2 HTTP/1.1
Content-Type: application/json

{
    "name": "Alok",
    "job": "Engineer"
}
```


## PATCH
![Screen Shot 2022-07-01 at 9.35.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/cefba07f-e909-d09d-c4d1-e47ad2a66a8c.png)


***Response:***
![Screen Shot 2022-07-01 at 9.35.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/fa5689b4-73e3-3c50-e8aa-b63081c1fca6.png)


***Code:***

```
###
Send Request
PATCH https://reqres.in/api/users/2 HTTP/1.1
Content-Type: application/json

{
    "name": "Alok Rawat",
    "job": "FrontEnd Engineer"
}
```


## DELETE
![Screen Shot 2022-07-01 at 9.36.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/4218f180-f065-75c7-d973-1d8a10c4a099.png)


***Response:***
![Screen Shot 2022-07-01 at 9.36.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/094def6d-8ec9-f19a-d156-12750a0c76e3.png)


***Code:***

```
###
Send Request
DELETE https://reqres.in/api/users/2 HTTP/1.1
Content-Type: application/json
```

## Final
![Screen Shot 2022-07-01 at 10.07.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117479/806b9fe5-1168-52cf-909c-2ba94dcea4e8.png)


## Why should we use a REST client extension?
In the current time, what we need to keep in mind i.e., speed and ease. Both the things you can find in REST Client Extension.
Besides, if you use an external tool, you will have to alt-tab to it while you develop and any other method you prefer. But with REST Client you only need to know how to use the same IDE you already know and use a lot!


* **Testing API endpoints**: With a REST client extension, you can quickly test your API endpoints without having to leave the editor or use a separate tool. You can easily send HTTP requests to your API and see the responses right within the editor.

* **Debugging**: You can also use a REST client extension to debug your API endpoints. You can inspect the headers, body, and response codes of each request, and quickly identify any issues.

* **Saving time**: By using a REST client extension, you can save time and be more productive. You can quickly switch between different API endpoints and test different scenarios, without having to manually create and send HTTP requests.

* **Improved workflow**: Having a REST client extension integrated with your editor can also improve your workflow. You can save and reuse HTTP requests, and easily share them with your team members.

Overall, using a REST client extension in Visual Studio Code can make it easier and faster to test, debug, and develop your APIs.

**Enjoy Coding and Happy Learning.**

**Reference:**

https://qiita.com/yoshii0110/items/d40a1c8bcf0353b5bff3

https://techcommunity.microsoft.com/t5/healthcare-and-life-sciences/calling-rest-apis-from-the-ide/ba-p/3145949