15.304.0 • Published 3 years ago

@angular-ru/http v15.304.0

Weekly downloads
113
License
MIT
Repository
github
Last release
3 years ago

DataHttpClientModule

Custom http client, with the ability to customize requests, auto unsubscribe and additional request interceptors.

Demo: https://github.com/Angular-RU/angular-ru-http-example-app

Table of contents:

  1. 📖 Changelog
  2. 📦 Advanced

First step

Example, if your API base url placed here https://my-server.com/api/*** and have swagger documentation:

npm.io

import { HttpClientModule } from '@angular/common/http';
import { DataHttpClientModule } from '@angular-ru/http';

@NgModule({
    imports: [
        // ...
        HttpClientModule,
        DataHttpClientModule.forRoot([ApiUsersClient], {
            hostUrl: 'https://my-server.com/api/'
        })
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Create your http client for your api controller

  • user.interface.ts
export interface User {
    id: number;
    name: string;
}
  • api-users.client.ts
import { Delete, Get, Patch, PathVariable, RequestBody, Put, RestClient } from '@angular-ru/http/decorators';
import { DataHttpClient } from '@angular-ru/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
@RestClient('/users')
export class ApiUsersClient extends DataHttpClient {
    @Get()
    public findAllUsers(): Observable<User[]> {
        return this.restTemplate();
    }

    @Post()
    public createUser(@RequestBody() _body: User): Observable<void> {
        return this.restTemplate();
    }

    @Get('/{id}')
    public findByIdUser(@PathVariable('id') _id: number): Observable<User> {
        return this.restTemplate();
    }

    @Put('/{id}')
    public updateUser(@PathVariable('id') _id: number, @RequestBody() _body: User): Observable<void> {
        return this.restTemplate();
    }

    @Delete('/{id}')
    public deleteByIdUser(@PathVariable('id') _id: number): Observable<void> {
        return this.restTemplate();
    }

    @Patch('/{id}')
    public mutateUser(@PathVariable('id') _id: number, @RequestBody() _body: Partial<User>): Observable<void> {
        return this.restTemplate();
    }
}
  • app.component.ts
@Component({
    //...
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class UsersComponent {
    private readonly users: User[] = [];

    constructor(private readonly users: ApiUsersClient, private readonly cd: ChangeDetectorRef) {}

    public ngOnInit(): void {
        this.users.findAllUsers().subscribe((users) => {
            this.users = users;
            this.cd.detectChanges();
        });
    }
}

Different use cases

each of these examples works the same

@Injectable()
@RestClient('/cities')
class MyCitiesClient extends DataHttpClient {
    @Put()
    public updateCity(@RequestBody() _body: CityRecordDto, @RequestParam('id') _id: number): Observable<void> {
        return this.restTemplate({ emitSuccess: true });
    }
}
@Injectable()
@RestClient('/cities')
class MyCitiesClient extends DataHttpClient {
    @Put()
    public updateCity(body: CityRecordDto, id: number): Observable<void> {
        return this.restTemplate({ emitSuccess: true, body, queryParams: { id } });
    }
}
@Injectable()
@RestClient('/cities')
class MyCitiesClient extends DataHttpClient {
    public updateCity(body: CityRecordDto, id: number): Observable<void> {
        return this.put({ emitSuccess: true, body, queryParams: { id } });
    }
}

Limiting the number of concurrent requests (optional)

OptionValueDescription
limitConcurrency255default
limitConcurrencyInfinityno limits
limitConcurrencynonly n requests

there is almost no limit on the number of requests that can be sent in parallel Note: various browsers have various limits for maximum connections per host name (Chrome: 6)

npm.io

but if necessary, you can change it for example, limitConcurrency: 5 This mean that maximum of 5 requests can be executed in parallel. Next one immediately start only if one of the previous requests is completed

  • app.module.ts
import { DataHttpClientModule } from '@angular-ru/http';

@NgModule({
    imports: [
        // ...
        DataHttpClientModule.forRoot([ApiUsersClient], {
            // ...
            limitConcurrency: 5
        })
    ]
    // ...
})
export class AppModule {}

npm.io

15.304.0

3 years ago

15.303.0

3 years ago

15.302.1

3 years ago

15.301.3

3 years ago

15.301.0

3 years ago

15.276.2

3 years ago

15.276.0

3 years ago

15.272.0

3 years ago

15.270.1

3 years ago

15.267.0

3 years ago

15.253.0

3 years ago

15.241.0

3 years ago

15.235.0

3 years ago

15.237.0

3 years ago

15.231.1

3 years ago

15.239.0

3 years ago

15.224.0

4 years ago

15.162.0

4 years ago

15.151.1

4 years ago

15.140.2

4 years ago

15.138.0

4 years ago

15.138.1

4 years ago

15.132.1

4 years ago

15.129.0

4 years ago

15.113.0

4 years ago

15.114.0

4 years ago

15.111.0

4 years ago

15.110.0

4 years ago

15.48.0

4 years ago

15.21.0

4 years ago

15.6.1

4 years ago

15.6.2

4 years ago

15.3.0

4 years ago

15.2.0

4 years ago

15.0.1

4 years ago

15.0.0

4 years ago

14.100.0

4 years ago

14.91.1

4 years ago

14.86.0

4 years ago

14.85.0

4 years ago

14.80.0

4 years ago

14.81.0

4 years ago

14.82.0

4 years ago

14.79.0

4 years ago

14.76.0

4 years ago

14.76.1

4 years ago

14.69.0

4 years ago