@denis_bruns/http-client-axios NPM

@denis_bruns/http-client-axios

A robust Axios‑based HTTP client with middleware support
Built on top of RxJS and leveraging core types from @denis_bruns/web-core-ts, this client allows you to compose, modify, and execute HTTP requests using a middleware chain. It integrates seamlessly with a variety of middleware—for example, injecting secret headers or environment variables—using a functional, composable approach.

Overview

@denis_bruns/http-client-axios is a TypeScript HTTP client built on top of Axios that:

Leverages RxJS for asynchronous request handling and composition.
Supports a middleware pipeline—via integration with @denis_bruns/http-client-middleware—to modify or extend requests before they are sent.
Handles common HTTP methods (GET, POST, PUT, PATCH, DELETE) with type-safe request and response options.
Integrates seamlessly with the core types defined in @denis_bruns/web-core-ts, enabling a consistent developer experience in clean architecture projects.

Key Features

Middleware Support:
Chain middleware to modify request headers, query parameters, or other configurations. Middleware are composed using a factory that merges successive HTTP client configurations.
RxJS Integration:
All request methods return an Observable. You can further compose these Observables with the full power of RxJS operators.
Flexible Request Methods:
Provides helper methods for GET, POST, PUT, PATCH, and DELETE. Optionally, full Axios responses can be returned.
Type-Safe Request Configuration:
Leverages types (from @denis_bruns/web-core-ts) for request options, ensuring that your HTTP configurations remain robust and predictable.
Seamless Axios Integration:
Uses Axios under the hood to perform actual HTTP requests while allowing for central configuration and middleware-driven modifications.

Installation

Using npm:

npm install @denis_bruns/http-client-axios

Or with yarn:

yarn add @denis_bruns/http-client-axios

Make sure to install peer dependencies if not already installed:

npm install axios rxjs @denis_bruns/web-core-ts

Basic Usage

Below is a basic example showing how to create an instance of the HTTP client, use middleware, and perform GET and POST requests.

import { HttpClientAxios } from '@denis_bruns/http-client-axios';
import { HttpClientRequestOptions } from '@denis_bruns/web-core-ts';
import { of } from 'rxjs';
import { lastValueFrom } from 'rxjs';

// Example middleware that adds a custom header
const addCustomHeaderMiddleware = (config: HttpClientRequestOptions) => {
  return of({
    ...config,
    headers: { ...config.headers, 'X-Custom-Header': 'custom-value' }
  });
};

// Create an instance with a base URL and middleware chain
const client = new HttpClientAxios('https://api.example.com', [addCustomHeaderMiddleware]);

// Making a GET request
async function fetchData() {
  const data = await lastValueFrom(client.get<{ id: number; name: string }>('/test'));
  console.log('GET response data:', data);
}

// Making a POST request with a body
async function postData() {
  const payload = { name: 'John Doe' };
  const data = await lastValueFrom(client.post<{ id: number; name: string }, typeof payload>('/user', payload));
  console.log('POST response data:', data);
}

fetchData();
postData();

Explanation

Middleware:
The example middleware addCustomHeaderMiddleware takes the initial HTTP client configuration and returns a new configuration object with an extra header.
GET & POST Methods:
The client exposes helper methods corresponding to common HTTP verbs. You can also use the generic request method for more advanced scenarios.
RxJS Observables:
All methods return an Observable, which you can compose and convert (here, via lastValueFrom) as needed.

Advanced Configuration

Returning Full Axios Responses

To obtain the complete Axios response (not only the data), set the returnFullResponse flag to true:

const fullResponse$ = client.request<{ id: number }, true>('GET', '/full-response', {
  returnFullResponse: true
});

Middleware Composition

Middleware functions are composed using createHttpClientMiddlewareFactory from @denis_bruns/http-client-middleware. This allows you to run multiple transformations over the request configuration and merge the results. For details on creating custom middleware chains, please consult the documentation in the http-client-middleware package.

Related Packages

@denis_bruns/web-core-ts

Provides the core interfaces and types used throughout the ecosystem.
@denis_bruns/http-client-middleware
Offers middleware utilities for HTTP clients and composes them into a single request configuration.