Calling REST APIs From the IDE : VSCode

***For those who seek efficiency and ease in everything they do.***
So here is one solution for you. Today we are talking about, 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. Great Job:thumbsup: :clap:

## How to Use :rolling_eyes:
1st, 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!:open_mouth: 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 you use a REST client extension?:wink:
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!

- Stay in the your favorite IDE – stop the context switching.
- Document All URLs your app uses  - No more bookmarks or comments in code.
- Store URLs next to your code – Since everything is in simple plain text files, as you change and modify your .http files you’ll be able to easily track the differences.
- Quickly Test URLs – even after a year, you do not need to import/setting up the ENV to send the request. You can simply open the text file and “send request”.
- Inspect Responses As Text Files – use all the tools of VS Code to look through the response: collapse/expand, find, regex.
- Save/Share Responses – No more screenshots of browser dev tools- simply send others the entire response payload.

**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