Shulou(Shulou.com)06/02 Report--

This article is about how to use VSCode REST plug-ins to make API calls. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

How do we get data?

If you've been developing Web for a long time, you probably know that a lot of our work revolves around data: reading data, writing data, manipulating data, and displaying it in browsers in a reasonable way.

In the past, in order to test REST API before connecting to UI to accept data, you usually had to query API from the terminal's command line, or use a GUI like Insomnia or Postman (I compared them in a previous blog).

But now, if you use VS Code (why not, it would be nice to write code with it! ), life becomes easier. We no longer need to exit IDE to test API, because there is already a plug-in that can do this: REST Client.

Using REST Client is very easy, and I'll show you how simple and fully functional this plug-in is.

Learn about the VS Code REST Client plug-in

I have been a fan of VS Code, the code editor, for several years, and I am grateful to know that someone has created a new useful plug-in and added it to the VS Code market.

So it was painful to start Postman or Insomnia every time I decided to test a new API route, and I found the REST Client plug-in to make it unnecessary.

REST Client is the most obvious name of the tool that exists so far, and its VS Code market description accurately summarizes its functionality: "REST Client allows you to send HTTP requests and view responses directly in Visual Studio Code."

It's that simple. Then, it provides a lot of details and examples of how to use it, but in fact, it is a HTTP tool built into 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 is complete, we can continue with the setup.

Set up REST Client script

Simply create a file that ends in .http in the root directory of the project, which REST Client recognizes and knows that it should be able to run HTTP requests from that file.

During the test, I threw a file I named test.http into the root directory of the project folder with an docker full-stack MERN login application I did a few years ago.

Test: 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 such as Postman.

Next, I'll show you how to do each type of basic CRUD operation, plus how to make authenticated API calls like JWT tokens, using my local MERN user registration application to point to the call.

POST example

The first example I'll introduce is REST Client's POST, because users have to register in my application before they can do anything else (after all, it's just a login service).

Therefore, the code will be displayed in the test.http file.

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

The first thing REST Client needs to work properly is the type of request made and the full URL path of the route it is trying to access. In this case, the request is POST,URL is http://localhost:3003/registerUser. The HTTP/1.1 at the end of the first line is related to the standard established by RFC 2616, but I'm not sure if it's necessary, so I keep it just to be safe.

Then, because this is a POST, include a JSON body in the request, and notice that there is a blank line between Content-Type and body-- which REST Client intentionally requires. So, we fill in the required fields, and then a small send Request option should appear on the POST. Put the mouse over it and click to see what happens.

The last thing you should notice is the # after the request in the test.http file, which is the delimiter between requests, as long as you insert # between each request to 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 is unsuccessful, you will still get all this information about what just happened and (hopefully) what went wrong. Cool.

GET example

Now that we have created a user, for example, we have forgotten their password, and they have sent an email to retrieve the password. The e-mail 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 GET request is initiated to ensure that the token contained in the email to reset the password is valid, which is what it might look like.

My GET points to the / reset endpoint and appends the resetPasswordToken query parameters required for validation on the server side. Content-Type is still application/json, and # # at the bottom separates this request from any other requests in the file.

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

That's all the GET request needs, and they don't have to worry about the body of the request.

Update example

Next is the U: update in CRUD. Suppose the user wants to update something in their profile information. It is not difficult to use REST Client.

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

So, if REST Client successfully hits the PUT endpoint when passing the body, this is what the Response tab in VS Code looks like.

At this point, let's move on to the authentication example. Because as far as I know, there are very few applications that do not protect routing and require some kind of authentication.

Authentication example

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

So, without delay, here is one of the endpoints I need to validate: looking for user information in the database.

Adding authorization to the REST Client request is really simple: simply add the key Authorization under where the route and content-type are declared, and then (at least in my case) I add the key and value of JWT (because they appear in the browser's local storage) as the value of the Authorization header.

So it becomes:

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 the information about the user stored in the database and a message that the user was successfully found.

This section may require some trial and error, but it's well worth it if you can figure out how a successful request is made in a browser's Dev Tools network call, through an existing Swagger endpoint, or through other similar documentation.

DELETE example

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

The query parameter required by this DELETE is username so that it knows which user to delete from the database and also needs to verify that the user is qualified to make the request. Apart from that, there is nothing new to introduce here.

This is really 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, many other types of authentication, environment and custom variables, viewing and saving raw responses, and so on.

I strongly recommend that you consult the documentation to see all the features of REST Client, which is very powerful.

REST Client documents: https://blog.bitsrc.io/vs-codes-rest-client-plugin-is-all-you-need-to-make-api-calls-e9e95fcfd85a

Thank you for reading! This is the end of the article on "how to use the VSCode REST plug-in to make API calls". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.