Overview and Usage of @ngify/http – A Reactive HTTP Client for Angular

Origin

The widely used HTTP client axios originated from AngularJS's $http service, and @ngify/http follows the same idea of providing an independent service that can be used outside AngularJS.

Development

In Angular (v2+), the HTTP client evolved to use RxJS Observables instead of Promises, enabling subscription to request responses.

const observable = http.get('url');
observable.subscribe(o => console.log(o));

Main Content

@ngify/http is a reactive HTTP client similar to Angular HttpClient, aiming to provide a standalone service usable outside Angular.

Key features include:

Typed response objects.

Simplified error handling.

Request and response interceptors.

Support for XMLHttpRequest, Fetch API, and WeChat Mini‑Program.

Prerequisites

Before using @ngify/http, you should be familiar with JavaScript/TypeScript, the HTTP protocol, and RxJS Observables.

API

Full API definitions are available at https://ngify.github.io/ngify .

Reliability

@ngify/http passes the unit tests of Angular HttpClient, ensuring reliable behavior.

Installation

npm i @ngify/http

Basic Usage

import { HttpClient, HttpContext, HttpContextToken, HttpHeaders, HttpParams } from '@ngify/http';
import { filter } from 'rxjs';

const http = new HttpClient();

http.get<{ code: number, data: any, msg: string }>('url', 'k=v')
    .pipe(filter(({ code }) => code === 0))
    .subscribe(res => console.log(res));

http.post('url', { k: 'v' }).subscribe(res => console.log(res));

const HTTP_CACHE_TOKEN = new HttpContextToken(() => 1800000);

http.put('url', null, { context: new HttpContext().set(HTTP_CACHE_TOKEN) })
    .subscribe(res => console.log(res));

http.patch('url', null, { params: { k: 'v' } })
    .subscribe(res => console.log(res));

http.delete('url', new HttpParams('k=v'), { headers: new HttpHeaders({ Authorization: 'token' }) })
    .subscribe(res => console.log(res));

Intercepting Requests and Responses

Interceptors can inspect and transform outgoing requests and incoming responses, forming a bidirectional chain.

import { HttpClient, HttpHandler, HttpRequest, HttpEvent, HttpInterceptor } from '@ngify/http';
import { Observable, map } from 'rxjs';

const http = new HttpClient([
  new class implements HttpInterceptor {
    intercept(request: HttpRequest
, next: HttpHandler): Observable
> {
      // Clone request to modify headers
      request = request.clone({
        headers: request.headers.set('Authorization', 'token')
      });
      return next.handle(request);
    }
  },
  {
    intercept(request: HttpRequest
, next: HttpHandler) {
      request = request.clone({
        params: request.params.set('k', 'v')
      });
      console.log('Intercepted request', request);
      return next.handle(request).pipe(
        tap(response => console.log('Intercepted response', response))
      );
    }
  }
]);

Request and response objects are immutable; modify them by cloning.

HTTP Request Classes

@ngify/http provides three built‑in backends:

HTTP Request Class

Description

HttpXhrBackend

Uses

XMLHttpRequest

for HTTP requests.

HttpFetchBackend

Uses the Fetch API.

HttpWxBackend

Works in WeChat Mini‑Programs.

The default backend is HttpXhrBackend , but you can switch via setupConfig :

import { HttpFetchBackend, setupConfig } from '@ngify/http';

setupConfig({
  backend: new HttpFetchBackend()
});

Using in Node.js

By default, @ngify/http uses browser implementations of XMLHttpRequest and Fetch API. To run in Node.js, provide compatible implementations.

XMLHttpRequest

import { HttpXhrBackend, setupConfig } from '@ngify/http';
import * as xhr2 from 'xhr2';

setupConfig({
  backend: new HttpXhrBackend(() => new xhr2.XMLHttpRequest())
});

Fetch API

import fetch from 'node-fetch';
import AbortController from 'abort-controller';
import { HttpFetchBackend, setupConfig } from '@ngify/http';

global.fetch = fetch;
global.AbortController = AbortController;

setupConfig({
  backend: new HttpFetchBackend()
});

Passing Extra Parameters

Use HttpContext to pass additional options, such as CORS mode for Fetch or HTTP2 for WeChat Mini‑Program.

// Fetch API extra parameters
http.get('url', null, {
  context: new HttpContext().set(FETCH_TOKEN, {
    mode: 'cors'
  })
});

// WeChat Mini‑Program extra parameters
http.get('url', null, {
  context: new HttpContext().set(WX_REQUSET_TOKEN, { enableHttp2: true })
});

For more usage details, visit the official Angular documentation at https://angular.cn .