SECRET OF CSS

Using Thunder Client VS Code Extension for Your APIs | by Amelye Chatila | Jul, 2022


Do you use VS Code? Do you produce or consume APIs? I guess the answers are yes

1*8Qr17V54w9LwEzxmz0 tww
Thunder Client installation.

With Thunder Client you can test your APIs without leaving your code editor. You can save a collection of your requests and return to it whenever you want perform a test say a day or a month later, furthermore you can export the collection into your project as a json file for sharing with others or for the future you.

Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with simple and clean design.

New Request

To use the Extension, Click Thunder Client icon on the Action Bar. From Sidebar click New Request button to test API.

Feed your API information to the Thunder Client request form. In this case, we have the following information:

url: 127.0.0.1:9090/api/v1/auth
method: POST
content: {
"username": "admin",
"password": "password"
}
1*R9h4zwYeFHeIjvJD9a0jeA
API Request created, and fired.

Generate Code Snippet

You can generate a Curl command, JavaScript Axios, and any other available options of your choice.

Curl Command code for JWT AUTH request generated by Thunder Client:

curl -X POST \
'127.0.0.1:9090/api/v1/auth' \
--header 'Accept: */*' \
--header 'Content-Type: application/json' \
--data '{
"username": "admin",
"password": "password"
}'

JavaScript Axios code for JWT AUTH request generated by Thunder Client:

import axios from "axios";let headersList = {
"Accept": "*/*",
"Content-Type": "application/json"
}
let bodyContent = JSON.stringify({
"username": "admin",
"password": "password"
});
let reqOptions = {
url: "127.0.0.1:9090/api/v1/auth",
method: "POST",
headers: headersList,
data: bodyContent,
}
axios.request(reqOptions).then(function (response) {
console.log(response.data);
})

Collections in Thunder Client

With Collections you can organize and save your work, you can have a collection for every project you are working on.

The request we have seen previously is under the Activity and after you use the tool for a while you will find that this place is cluttered. Also finding the request you need to fire is also very challenging, hence we have collections.

Let’s save our request to the collection;

1*SybvWMe7Cp H O93hp7RFA
1*GBKRGMBJUgNo6yFdkuB2Hg
Click Save to Collection, Fill the Form and you have a new collection.

Under Collections you will find the new collection created. You can export collection as shown below;

1*eMSuIYj9BHv3iwNmlnXRTg

Here is the content of the exported collection;

{
"client": "Thunder Client",
"collectionName": "JWT AUTH",
"dateExported": "2022-07-07T08:42:22.385Z",
"version": "1.1",
"folders": [],
"requests": [
{
"_id": "bb64bbab-2718-44a2-b705-7a81e550e93e",
"colId": "a3248937-608b-4496-ac4c-aaf53e9e3722",
"containerId": "",
"name": "/api/v1/auth",
"url": "127.0.0.1:9090/api/v1/auth",
"method": "POST",
"sortNum": 10000,
"created": "2022-07-07T08:36:11.145Z",
"modified": "2022-07-07T08:36:11.145Z",
"headers": [],
"params": [],
"body": {
"type": "json",
"raw": "{\n \"username\": \"admin\",\n \"password\": \"password\"\n}",
"form": []
},
"tests": []
}
]
}

Import Curl

The Curl import will beautifully create a request in Thunder Client and you can finalize it by formatting the JSON or XML content if any, with a format button.

A sample import from Jasmin SMS Gateway

curl -X POST \
'http://127.0.0.1:8080/secure/send' \
--header 'Accept: */*' \
--header 'Authorization: Basic Zm9vOmJhcg==' \
--header 'Content-Type: application/json' \
--data '{
"to": 19012233451,
"from": "Jookies",
"content": "Hello",
"dlr": "yes",
"dlr-url": "http://192.168.202.54/dlr_receiver.php",
"dlr-level": 3
}'

NB: I used the curl request from original source and the json body was placed under text I had to cut paste it to be under json and formatted it there. Something I will dig into …

Lastly, since you use VS Code let me ask again the never-ending question; Do you prefer the Dark mode theme? Or do you prefer Light mode theme? I guess the answers are yes!



News Credit

%d bloggers like this: