Only use the rest client plug-in of vs code to make API calls


Only use the rest client plug-in of vs code to make API calls

Why leave the IDE to test the new API? Now you don’t have to.

How do we get data

If you have been doing web development for a long time, you may know that a lot of our work is focused on data: reading data, writing data, manipulating data, and displaying it in the browser in a reasonable way.

Most of these data are provided by the rest API endpoint. Generally speaking, the data we want exists in other services or databases. Our applications query the service to retrieve the data and use the data according to their own needs.

In the past, in order to test the rest API before connecting to the UI to accept data, it was often necessary to query the API through the terminal’s command line, or use a GUI like insumnia or postman (which I compared in my previous blog posts).

But now, if you use vs Code (why not, how nice to write code with it!) Life becomes simple. We no longer need to exit the IDE to test the API, because now there is a plug-in that can do this:REST Client

It’s very simple to use the rest client, and I’ll show you how simple and functional this plug-in is.

Understanding vs Code rest client plug-in

I’ve been a fan of vs code, the code editor, for several years. I’m very grateful to learn that someone has created a new and useful plug-in and added it to the vs Code market.

So when I decide to test a new API route, it is a painful thing to start postman or insignia every time I need to test a new API route. I found that the rest client plug-in can make all this unnecessary.

Rest client is the most obvious name for a tool that exists so far, and its vs Code market description accurately summarizes its function: “rest client allows you to send HTTP requests and view responses directly in Visual Studio code.”

That’s it. Then, it provides a lot of detail and examples of how to use it, but it’s actually a built-in HTTP tool in vs code. So let’s start using it.

Install rest client

To find it, open the market extension in vs Code (the small Tetris icon on the left panel), type “rest client” in the search bar, and install the first result in the list (the author should be Huachao MAO).

Only use the rest client plug-in of vs code to make API calls

After the installation, we can proceed with the setup.

Set rest client script

Simply create a.httpAt the end of the file, the rest client recognizes this and knows that it should be able to run HTTP requests from that file.

During the test, I named a docker based full stack mern login application I made a few years agotest.httpTo the root of the project folder.

Only use the rest client plug-in of vs code to make API calls

Test it: basic operation

This is the cool part: in my experience, this little rest client plug-in can do as much as more complex API clients like postman.

Next, I’ll show you how to perform each type of basic crud operation, plus how to make API calls that need authentication like JWT token, using the mern user registered application that I run locally to point to the call.

Post example

The first example I’ll introduce is the rest client’sPOSTBecause the user has to register in my application to do anything else (after all, this is just a login service).

Therefore, the code will be in thetest.httpFile.

Only use the rest client plug-in of vs code to make API calls

OK, let’s review what happened in the code snippet above.

The first thing the rest client needs to work properly is the type of request it makes and the full URL path of the route it is trying to access. In this case, the request is post and the URL ishttp://localhost:3003/registerUser。 At the end of the first lineHTTP/1.1It’s related to the standard established by RFC 2616, but I’m not sure if it’s necessary, so I keep it just for safety.

And then, because this is aPOSTSo you should include a JSON body in the request. Note thatContent-TypeandbodyThere is a blank line in between – this is what the rest client intentionally asked for. So, we fill in the required fields, and then, in thePOSTThere should be a little one on itsend RequestOptions. Put the mouse over it and click to see what happens.

Only use the rest client plug-in of vs code to make API calls

The last thing you should pay attention to istest.httpAfter the request in the file###, which is the separator between requests, as long as it is inserted between each request###You can include any number of requests in the file.

If the request is successful, you will see something similar to what I posted above. Even if the request doesn’t succeed, you’ll still get all this information about what just happened, and (hopefully) what’s wrong. Cool

Get example

Now that we’ve created a user, let’s say we forgot their password, they sent an email to retrieve it. The email contains tokens and links that take them to the page to reset the password.

Once they click on the link and log on to the page, aGETThe request is initiated to ensure that the token contained in the message to reset the password is valid, which is what it might look like.

Only use the rest client plug-in of vs code to make API calls

myGETYes/resetEnd point, and the server side is attached with theresetPasswordTokenQuery parameters.Content-TypeStillapplication/json, bottom###Separate this request from any other requests in the file.

If the token is indeed valid, the server’s response is as follows:

Only use the rest client plug-in of vs code to make API calls

And that’s all the get requests need, and they don’t have to worry about the body of the request.

Update sample

Next is u: update in crud. Suppose a user wants to update something in his profile information. It’s not difficult to use the rest client.

Only use the rest client plug-in of vs code to make API calls

For this request, the request type is updated toPUT, body includes any fields on the object that need to be updated. In my app, users can update their first name, last name or email.

Therefore, when passing the body, if the rest client successfully hits the put endpoint, this is what the response tab in vs code looks like.

Only use the rest client plug-in of vs code to make API calls

So far, let’s move on to the authentication example. Because as far as I know, there are very few applications that don’t protect routes and need some kind of authentication.

Authentication example

Once again, I was impressed by the breadth of different authentication formats supported by the rest client. At the time of writing, the rest client documentation states that it supports six popular types of authentication, including support for JWT authentication, which my application relies on for all protected routes.

So, before it’s too late, here’s one of the endpoints I need to validate: looking up the user’s information in the database.

Only use the rest client plug-in of vs code to make API calls

Adding authorization to a rest client request is really simple: simply add the key below where the route and content type are declaredAuthorizationAnd then (in my case at least) I add JWT’s keys and values (because they appear in the browser’s local storage) asAuthorizationThe value of the header.

This becomes:


Then just send the request and see what happens.

If your authentication is configured correctly, you will receive some type of 200 response from the server, and for my request, it will return all information related to the user stored in the database, as well as a message that successfully found the user.

This may take some trial and error, but it’s worth it if you can figure out how a successful request was made in the browser’s dev tools network call, through the existing swagger endpoint, or through other similar documentation.

Delete example

After the other examples I provided above, the example should be simple

Only use the rest client plug-in of vs code to make API calls

thisDELETEThe required query parameters areusernameSo that it knows exactly which user in the database to delete, and also needs to verify that the user is qualified to make the request. Besides, there is nothing new to introduce here.

Only use the rest client plug-in of vs code to make API calls

This is actually just the tip of the iceberg that rest client can do. I covered rest requests and one form of authentication, but it can also support graphql requests, a variety of other types of authentication, environment and custom variables, viewing and saving the original response, and so on.

I strongly recommend that you check the documentation for all the features of the rest client, which is very powerful.

Rest client documentation:https://marketplace.visualstu…


Data drives the Internet, and with the further development of their career, web developers will eventually become very good at accessing and transforming data to meet their own needs.

In the past, when obtaining data hosted in other places, web developers often turned to tools like postman or insignia to have a slightly better interface than the command line. But now there is a vs code plug-in, which makes the requirements outside the code editor obsolete. It is called rest client, which is very good.

Crud operation? no problem! Graphql support? no problem! Authentication options? no problem! The rest client provides all of these options and more, and is easy to set up and use. I will definitely use it more in future projects.

Please come back in a few weeks – I’ll write more about JavaScript, react, ES6, or other web development related content.

Thank you for reading. I hope you can consider using the rest client to handle any API queries you may need to do in the future. I think you will be surprised by the pleasant experience it can provide, without any API GUI.

Original text:
Author: Paige niedringhaus

Wechat search [front end full stack developers] pay attention to hair loss, stall settingSelling goodsContinuous learning programmers, the first time to read the latest articles, will give priority to two days to publish new articles. Attention can be a big gift package, you can save a lot of money!

Only use the rest client plug-in of vs code to make API calls

Recommended Today

Explain module, import and export in JavaScript

Author: Tania rascia Crazy technology house Original text:… In the era of the Internet, websites are mainly developed with HTML and CSS. If you load JavaScript into a page, it usually provides effects and interactions in the form of small fragments. Generally, all JavaScript code is written in a file and loaded into a filescriptTag. […]