rxcomp-http

💎 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

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,
};

Browser Compatibility

RxComp supports all browsers that are ES5-compliant (IE8 and below are not supported).

Contributing

Pull requests are welcome and please submit bugs 🐞

Install packages

npm install

Build, Serve & Watch

gulp

Build Dist

gulp build --target dist

Thank you for taking the time to provide feedback and review. This feedback is appreciated and very helpful 🌈

• Github Project Page

If you find it helpful, feel free to contribute in keeping this library up to date via PayPal

Contact

• Luca Zampetti [e-mail]
• Follow @actarian on Twitter

Release Notes

Changelog here.