Rxcomp-http NPM

💎 RxComp HttpModule

RxComp Http is the Http module for RxComp, developed with RxJs.

lib & dependancy	size
rxcomp-http.min.js
rxcomp-http.min.js
rxcomp.min.js
rxcomp.min.js
rxjs.min.js
rxjs.min.js

RxComp Http Demo
RxComp Http Api

npm.io

Installation and Usage

ES6 via npm

This library depend on RxComp and RxJs
install via npm or include via script

npm install rxjs rxcomp rxcomp-http --save

CDN

For CDN, you can use unpkg

<script src="https://unpkg.com/rxjs@6.6.2/bundles/rxjs.umd.min.js" crossorigin="anonymous" SameSite="none Secure"></script>
<script src="https://unpkg.com/rxcomp@1.0.0-beta.19/dist/umd/rxcomp.min.js" crossorigin="anonymous" SameSite="none Secure"></script>  
<script src="https://unpkg.com/rxcomp-http@1.0.0-beta.19/dist/umd/rxcomp-http.min.js" crossorigin="anonymous" SameSite="none Secure"></script>

The global namespace for RxComp is rxcomp

import { CoreModule, Module } from 'rxcomp';

The global namespace for RxComp HttpModule is rxcomp.http

import { HttpModule } from 'rxcomp-http';

Bootstrapping Module

import { Browser, CoreModule, Module } from 'rxcomp';
import { HttpModule } from 'rxcomp-http';
import AppComponent from './app.component';

export default class AppModule extends Module {}

AppModule.meta = {
    imports: [
        CoreModule,
        HttpModule,
    ],
    declarations: [],
    bootstrap: AppComponent,
};

Browser.bootstrap(AppModule);

HttpService

Import HttpService and call any CRUD method as Observable.

import { HttpService } from 'rxcomp-http';

HttpService.get$<IResponseData>(methodUrl).pipe(
  first(),
).subscribe((response: IResponseData) => {
  this.items = response.data.getTodos;
  this.pushChanges();
}, error => console.log);

Interceptors

You can create your custom interceptors implementing IHttpInterceptors.

import { IHttpInterceptor } from 'rxcomp-http';

export class CustomRequestInterceptor implements IHttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (shouldCancelRequest) {
            return EMPTY;
        }
    		return next.handle(request);
    }
}

export class CustomResponseInterceptor implements IHttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(
            tap(event => {
                if (event instanceof HttpResponse) {
                    console.log('CustomResponseInterceptor.status', event.status);
                    console.log('CustomResponseInterceptor.filter', request.params.get('filter'));
                }
            })
        );
    }
}

Add your custom interceptors in the AppModule.

AppModule.meta = {
    imports: [
        CoreModule,
        HttpModule.useInterceptors([
          CustomRequestInterceptor, 
          CustomResponseInterceptor
        ]),
    ],
    declarations: [],
    bootstrap: AppComponent,
};