HTTP Client for Visual Studio Code to POST JSON, XML, image, ... files to REST APIs

Last update: Nov 18, 2021

Overview

friflo POST

Goal

Main goal of this extension is storing all HTTP request & response data automatically as files in a VSCode workspace.
This ensures this data is still available in new VSCode sessions. It also enables other VSCode extensions utilizing request & response files. E.g. JSON Schema validation of JSON request & response files, storing results in git and comparing subsequent response results with previous ones.

GitHub repository link

Features

Send files in your workspace like JSON or XML via HTTP POST, PUT & PATCH with a single click on a CodeLens button.
E.g. say-hello.test.json
Store HTTP responses like JSON or XML automatically as files in the workspace.
E.g. say-hello.test.resp.json
Store HTTP request / response header automatically as a markdown file in the workspace.
E.g. say-hello.test.resp.md
Enables using VSCode language validators like JSON Schema for request and response files.
Show and edit HTTP response directly in a separate workspace editor tab.
Toggle between response body and headers with a single click in the editor tab.
E.g. toggle between say-hello.test.resp.json & say-hello.test.resp.md
Enables using other utilities like node processing request & response files as they are valid JSON or XML
Enables using git as a simple regression test to compare response bodies and headers with previous requests.
Enables configuration via the config file .post-config for all request files in a folder to:
- set the http endpoints and specific http headers
- set the response folder for response files.

Usage

The screen recording (one minute) below show the entire workflow.

Using Context menu > POST Request to create .post-config file and adjust the endpoint url
Click the POST button on top of the JSON file and toggle in the response tab between response body (JSON) and headers
Demonstrate JSON Schema validation of JSON request & response files.
Execute a second request with a single click using the configuration from the beginning.
Execute a third request - this time PUT - to show the error case when the server is not responding.
The request is canceled by clicking on the progress indicator in the status bar.
Use VSCode Source Control to show the diff of the response info with a previous successful request.

Tips

As every request file generate two response files e.g. test.resp.json and test.resp.md in the response folder it may be desired to hide them in the EXPLORER panel. To do this add the section below to .vscode/settings.json.

{
    "settings": {
        "files.exclude": {
            "**/response/*.resp.json": true,
            "**/response/*.resp.md":   true
        }
    }
}