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).
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 ago
test.httpTo the root of the project folder.
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.
The first example I’ll introduce is the rest client’s
POSTBecause 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 the
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 is
http://localhost:3003/registerUser。 At the end of the first line
HTTP/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 a
POSTSo you should include a JSON body in the request. Note that
bodyThere 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 the
POSTThere should be a little one on it
send RequestOptions. Put the mouse over it and click to see what happens.
The last thing you should pay attention to is
test.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
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, a
GETThe 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.
/resetEnd point, and the server side is attached with the
###Separate this request from any other requests in the file.
If the token is indeed valid, the server’s response is as follows:
And that’s all the get requests need, and they don’t have to worry about the body of the request.
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.
For this request, the request type is updated to
PUT, 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.
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.
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.
Adding authorization to a rest client request is really simple: simply add the key below where the route and content type are declared
AuthorizationAnd then (in my case at least) I add JWT’s keys and values (because they appear in the browser’s local storage) as
AuthorizationThe value of the header.
Authorization: jwt XXXXXXXXXXXXXXXXXX
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.
After the other examples I provided above, the example should be simple
DELETEThe required query parameters are
usernameSo 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.
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.
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.
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!