preface

Interface debugging is an essential skill for every software development practitioner. The completion of a project is bound to pass a lot of interface testing. In the actual development process, the time of interface debugging is not less than the time used in the actual development.

As front-end developers, we typically use Postman (or PostWoman, etc.) tools to make REST API calls.

1. Postman restrictions

Postman is convenient for debugging interfaces, but it has many limitations.

1. You need to start extra software and take up a lot of RAM

We are already using VSCode to develop the project, why do we need to open Postman to debug the interface? And Postman runs on a lot of RAM, which is especially important for RAM strapped devices.

2. Premium features are paid for

Calling test apis is fine, but not very convenient if you want to edit, version control, or just share them with your team.

Sure, you can use the Paid version of Postman, but that means you have to pay, and all your teams need to use Postman, which is a lot of work!

Do you know the REST Client?

REST Client is a VS Code extension that allows you to send HTTP requests and view the responses directly in VS Code.

Because it is text-based, we can easily version control between repositories. 👍

Postman and REST Client

1. The advantages

  • The ability to version and share your API calls across teams;
  • It’s just an HTTP file that can be collaboratively maintained by team members using Git;
  • You can maintain multiple interfaces in a single HTTP file without switching Windows.
  • Compared to Postman, the REST Client supports cURL and RFC 2616 to call the REST API.

2. The shortcomings

  • You must use VS Code, it is not possible to use other tools;
  • While Postman has a powerful user interface, REST Client does not have an interface. It simply writes requests in an HTTP file, which is not as convenient as Postman.

Four, REST Client

1. Regular

Step 1: Install the REST Client plug-in

Step 2: Create one.http 或 .restfile

Step 3: Write to the test interface

  1. The POST request complies with RFC 2616
POST http:/ / dummy.restapiexample.com/api/v1/create HTTP / 1.1
content-type: application/json

{
    "name":"Hendry"."salary":"61888"."age":"26"
}
Copy the code
  1. A POST request that complies with cURL
curl -X POST "http://dummy.restapiexample.com/api/v1/create" -d "Hello World"
Copy the code

If the request method is omitted, the request is treated as a GET.

Note: Interfaces are separated by ###, and multiple HTTP requests can be covered in the same.http file. Unlike Postman, different HTTP requests need to be placed in different tabs.

Step 4: Send the request and test the interface

Click Send Request, or right click Send Request, or press Ctrl+Alt+R (or Cmd+Alt+R), and your REST API will execute, and the API Response will appear in the right pane.

2. Take a step further

An HTTP file may define many requests and file-level custom variables, making it difficult to find the request/variable you want. We can use the shortcut Ctrl+Shift+O (or Cmd+Shift+O) to toggle requests/variables.

Customize environment variables

The API parameters may vary from environment to environment (development, test, production), and we can’t manually change the code every time we switch environments, so we can customize the project environment variables every time we switch.

Click Code => Preferences => Settings to open Settings, switch to Workspace Settings, and configure settings.json file:

{
  "rest-client.environmentVariables": {
    "$shared": {
        "version": "v1"."prodToken": "foo"."nonProdToken": "bar"
    },
    "local": {
        "version": "v2"."host": "localhost"."dummyhost": "local"."token": "{{$shared nonProdToken}}"."secretKey": "devSecret"
    },
    "production": {
        "host": "api.apiopen.top"."dummyhost": "dummy.restapiexample.com"."token": "{{$shared prodToken}}"."secretKey" : "prodSecret"}}}Copy the code

You can switch between different environments (Ctrl+Alt+E or Cmd+Alt+E) and invoke the corresponding configuration items (host, token, etc.).

Test interface RFC 2616 // host for environment variable GET https://{{host}}/musicRankings HTTP/1.1Copy the code

Of course, the REST-client has more configuration items, such as:

  • rest-client.defaultHeaders: The default header request body. The default is{ "User-Agent": "vscode-restclient", "Accept-Encoding": "gzip" } ；
  • rest-client.timeoutinmilliseconds: Specifies the timeout period. The default value is 0 ms.
  • rest-client.previewOption: Controls which parts should be previewed through the REST-Client. Optionalfull 、 headers 、 body 、 exchangeBy default,full ；
  • rest-client.followredirect: Whether to support HTTP 3xx redirection. Supported by default.

And so on… .

Custom file variables

We can define file variables anywhere in the HTTP file, and they can be referenced in any request throughout the file. Such as:

@port = 8080@contentType = application/json ### # https:// {{host}} {{name}} / HTTP / 1.1Copy the code
  • For file variables, the definition follows@variableName = variableValueSyntax that takes up an entire line;
  • Variable name (variableName) must not contain any Spaces. As for variable values (variableValue), which can consist of any character, even allowing Spaces (leading and trailing Spaces will be stripped);
  • If you want to keep some special characters like newlines, you can use backslashes\n ；

Customize request variables

Request variables can be used when the value of a single request result needs to be used by other requests. The format is: @ name newname, request variable reference grammar for {{requestName. (the response | request). (the body | headers). (JSONPath | XPath | Header name)}}.

@contentType = Application /json ### # @name createComment POST https://{{host}}/comments HTTP/1.1 Content-type: {{contentType}} ### # @name getCreatedComment GET https://{{host}}/comments/{{createComment.response.body.$.id}} HTTP / 1.1 Authorization: {{the login. The response. The headers. X-ray AuthToken}}Copy the code

System variables

Some of the system’s own variables, the use of system variables need to have a $sign

  • {{$guid}}Unique identification number
  • {{$randomInt min max}}Returns amin 和 maxBetween random numbers
  • {{$timestamp [offset option]}}Add:UTCThe time stamp.
  • {{$timestamp number option}}For example, 3 hours ago{{$timestamp -3 h}}; On behalf of the day after tomorrow{{$timestamp 2 d}}.

For more information about the usage of system variables, see the official documentation

More features waiting for you to dig, seevscode-restclient!!!!!!!!! 👏 👏 👏

Five, the summary

Postman is a good tool, but REST Client is worth a try. After all, the IDEA REST Client is already available on the back end. When working with colleagues on collaborative development, add a.http interface request file to the project. It’s convenient for others while it’s convenient for yourself.

If you think it’s good, just like it! 👍 👍 👍

For more on this series,Go to the Github blog home page

Walk last

  1. ❤️ Have fun, keep learning, and always keep coding. 👨 💻

  2. If you have any questions or more unique opinions, please comment or directly contact The Bottle gentleman (the public number replies to 123)! 👀 👇

  3. 👇 welcome to pay attention to: front bottle gentleman, updated daily! 👇