introduce

Today we introduce a good tool for backend development assistance – REST Client, plug-in as its name this is a REST Client plug-in, our VSCode into a REST interface testing tool

We usually use PostMan to complete the interface test, because it is very simple and quick to use. However, I have been looking for a better solution, which is to open an app without switching Windows. Finally, I found the REST Client plug-in between versions when USING VSCode for a period of time. At first glance, the REST Client plug-in may seem very rudimentary, but after using it for a while, you’ll find that there is everything you need to do interface testing in the REST Client plug-in

  • advantage

    • Based on the HTTP language, HTTP language is a very simple language, using HTTP language can easily describe the request
    • Plain text records, unlike PostMan, which keeps binaries in the cloud, or Paw, and plain text can track content changes using Git
    • No need to switch Windows, testing, debugging, and code editing are all done in one VSCode

  • disadvantage

    • Operation and use are not as intuitive as graphical tools like PostMan
    • Scripts that manipulate data before and after requests are not supported, but this is already in the author’s development plan

Most of the time, we just need to have a little tool at hand to see if the interface is working, and REST Client is our first choice

Used to introduce

Installation and Getting started

The plug-in installation is simple and can be done by searching restClient

After the REST Client is installed, you can view REST Client functions on the command menu

A simple request

Let’s start by sending the simplest request

You need to create an HTTP file, for example, test.http

Then type the following:

GET http://localhost:8000/api/v1/public/echo? MSG = 1345 asdf HTTP / 1.1Copy the code

Echo is a test service that returns the content of the MSG you passed in

Click the button to Send the Request. After the Request is completed, the plug-in will split the current window and open the new result in the window on the right. The following figure shows all the relevant information of the Request

HTTP Language Basics

Introduction to language

HTTP is a very simple language that only takes a few minutes to get started

See above for a basic introduction to the HTTP language syntax. With VSCode’s autoprompt feature, it’s not too fast to use

Don’t worry about remembering the options in the header. If you can’t remember, Ctrl + space will bring up the autoprompt

Something to watch out for

  1. The request text should be followed by a blank line, or one#The first line is recommended as a blank line so that multiple requests look good
  2. If you need to putformType argument split into multiple lines, then the second argument must start with&Start (picture)
  3. GET requests can also split arguments into multiple lines, each line must start with a?or&start

Send a file

Typically, we do this using multipart/form-data requests

As configured, the REST Client will fill the file contents into the appropriate area to complete the sending

Save request results

The interface for returning images can be previewed directly in VSCode. If it’s a binary file like Excel, it might show garbled characters (binaries).

Select the corresponding results page, providing a button to save the results in the upper right corner

Viewing request History

Use Ctrl + Alt + H (macOS uses Cmd + Option + H) to view the request history

Use the variable

The benefit of variables, as we all know from development, is that variables can also be used in the HTTP language to help organize request code

Custom variable

We can define variables directly in HTTP files, starting with the @ symbol and using the {{variable name}} format

@ host = http://localhost:8000 @ token = adsfasdfasdfadsfasdfasdfas # # # test GET {{host}} / API/v1 / public/echo HTTP / 1.1? MSG = 1345ASdf &bundle_id=demo &test=1 &token={{token}} ### test Request POST {{host}}/ API /v1/public/echo HTTP/1.1 Content-Type: application/x-www-form-urlencoded User-Agent: iPhone test=1 &bundle_id=demo &msg=123123 &token={{token}}Copy the code

In this way, when testing and verifying the correctness of interfaces in different environments, we can easily switch between different servers, or it is very convenient when all interfaces use the same parameter. For example, the token above should be used by most interfaces

The environment variable

In addition to using custom variables, you can also create global environment variables for the current project or for the editor

"rest-client.environmentVariables": {
    "$shared": {
        "version": "v1"
    },
    "local": {
        "version": "v2",
        "host": "http://localhost:8000",
        "token": "tokentokentokentoken1"
    },
    "prod": {
        "host": "http://api.xxxxxx.com",
        "token": "tokentokentoken2"
    }
}
Copy the code

The variables in $shared above represent the ones available in all environment Settings

You can press Ctrl + Alt + E (Cmd + Option + E) to switch the environment

System variables

REST Client provides some built-in system variables for us to use directly (I have not used Azure before, so I skip Azure related variables, you can refer to the documentation to use).

  • {{$GUID}}: Generates a UUID

  • {{$randomInt min Max}}: generates a random integer

  • {{$timestamp [offset option]}}: generates the timestamp. You can use {{$timestamp -3 d}} to generate the timestamp 3 days ago, or use {{$timestamp 2 h}} to generate the timestamp 2 hours later

  • {{$a datetime rfc1123 | iso8601 [offset option]}} : generate the date string

Accessibility provided by VSCode

VSCode for us to use HTTP language to provide automatic prompts, Outline code navigation functions, convenient for us to write interface test code

Automatic prompt

Outline and code navigation

Validation and certificates

Basic Auth

Basic Auth can use Base64 after username:password, or directly fill in username and password, that is, the following two forms are ok

Results of using Base64

POST {{host}}/ API /v1/public/echo HTTP/1.1 Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=Copy the code

Use username and password

POST {{host}}/ API /v1/public/echo HTTP/1.1 Authorization: Basic Username PasswordCopy the code

Digest Auth

Digest Auth Type username and password

POST {{host}}/ API /v1/public/echo HTTP/1.1 Authorization: Digest Username PasswordCopy the code

SSL certificate

SSL certificates take effect automatically when you specify the certificate path for a specific domain name in the Settings file

"rest-client.certificates": {
    "localhost:8081": {
        "cert": "/Users/demo/Certificates/client.crt",
        "key": "/Users/demo/Keys/client.key"
    },
    "example.com": {
        "cert": "/Users/demo/Certificates/client.crt",
        "key": "/Users/demo/Keys/client.key"
    }
}
Copy the code

For each host we can set the following:

  • Cert: indicates the x509 certificate path
  • Key: indicates the path of the private key
  • PFX: PKCS #12 or PFX certificate path
  • Passphrase: certificate password (set if required)

Code generation

Postman’s code generation provided a lot of convenience for me when I used Postman, and the REST Client provides the same functionality

To Copy the current Request to cURL, you can also use Ctrl + Alt + C (Cmd + Option + C in macOS) to call out the code generation menu and select the language to be generated

After selecting a language, choose how specific code is invoked, such as Python using the HTTP. client library or the Requests library to send Requests

The naming request

Before we send all the requests are anonymous at the request of the anonymous request and naming difference is that in a HTTP file, you can reference named request request and response information, there are dependencies between requests when this feature is useful, for example with each other after a successful login request need to update the log on the returned token, Named requests can use Either JSONPath or XPath to retrieve response data

An update of the variable value using the current named request is also displayed in the response

Some useful Settings

Set the response display

The Preview Option in the REST Client Settings allows you to set what to display in the request response. There are four options: Full, body, header, and exchang

Let’s take a look at what the four results show

  • Full: Header + Body

  • Body: Only body is displayed

  • Header: Displays only header

  • Exchange: Display request + Header + Body

Other common Settings

  • rest-client.timeoutinmilliseconds: Sets the request timeout, in milliseconds
  • rest-client.showResponseInDifferentTab: A new TAB is created for each response request. If the value is false, each request overwrites the previous request result. If the value is true, each request opens a new TAB to compare multiple request results
  • rest-client.previewColumn: Request result display,currentRepresents the group displayed in the current editorbesideRepresents the group shown in the side editor (this side is based on the editor’sworkbench.editor.openSideBySideDirectionOptions are displayed on the right or below
  • Proxy: usinghttp.proxy 和 http.proxyStrictSSL

The last

In fact, Postman and Paw both provide more powerful auxiliary tools. Using REST Client here, I simply feel that MOST functions of Postman and Paw are not available to me, because I only verify whether the interface is normal and whether the business can run, so I have been looking for a simple tool. The REST Client just meets all my needs

Here attached is the REST Client project address, which also has the corresponding document github.com/Huachao/vsc…

Finally, please subscribe to my wechat official account Little Code

  • The public number mainly hair some development related technical articles
  • Talk about your understanding and experience of technology
  • Maybe they’ll talk about life lessons
  • I am not very productive, but strive for quality and originality