https://github.com/angular-ru/angular-ru-http-example-app
DEMO: https://angular-ru.github.io/angular-ru-http-example-app/
https://github.com/angular-ru/angular-ru-http-example-app
Last synced: 3 months ago
JSON representation
DEMO: https://angular-ru.github.io/angular-ru-http-example-app/
- Host: GitHub
- URL: https://github.com/angular-ru/angular-ru-http-example-app
- Owner: Angular-RU
- Created: 2021-03-03T14:37:40.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-07-07T14:02:54.000Z (almost 4 years ago)
- Last Synced: 2025-01-24T15:29:09.793Z (5 months ago)
- Language: HTML
- Homepage:
- Size: 1.07 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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](https://github.com/Angular-RU/angular-ru-sdk/blob/master/CHANGELOG.md)
2. [📦 Advanced](#table-of-contents)
- [(@)angular-ru/http/utils](https://github.com/Angular-RU/angular-ru-sdk/blob/master/packages/http/docs/utils.md)
- [(@)angular-ru/http/decorators](https://github.com/Angular-RU/angular-ru-sdk/blob/master/packages/http/docs/decorators.md)
#### First step
Example, if your API base url placed here `https://my-server.com/api/***` and have swagger documentation:
```ts
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`
```ts
export interface User {
id: number;
name: string;
}
```
- `api-users.client.ts`
```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 {
return this.restTemplate();
}
@Post()
public createUser(@RequestBody() _body: User): Observable {
return this.restTemplate();
}
@Get('/{id}')
public findByIdUser(@PathVariable('id') _id: number): Observable {
return this.restTemplate();
}
@Put('/{id}')
public updateUser(@PathVariable('id') _id: number, @RequestBody() _body: User): Observable {
return this.restTemplate();
}
@Delete('/{id}')
public deleteByIdUser(@PathVariable('id') _id: number): Observable {
return this.restTemplate();
}
@Patch('/{id}')
public mutateUser(@PathVariable('id') _id: number, @RequestBody() _body: Partial): Observable {
return this.restTemplate();
}
}
```
- `app.component.ts`
```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
```ts
@Injectable()
@RestClient('/cities')
class MyCitiesClient extends DataHttpClient {
@Put()
public updateCity(@RequestBody() _body: CityRecordDto, @RequestParam('id') _id: number): Observable {
return this.restTemplate({ emitSuccess: true });
}
}
```
```ts
@Injectable()
@RestClient('/cities')
class MyCitiesClient extends DataHttpClient {
@Put()
public updateCity(body: CityRecordDto, id: number): Observable {
return this.restTemplate({ emitSuccess: true, body, queryParams: { id } });
}
}
```
```ts
@Injectable()
@RestClient('/cities')
class MyCitiesClient extends DataHttpClient {
public updateCity(body: CityRecordDto, id: number): Observable {
return this.put({ emitSuccess: true, body, queryParams: { id } });
}
}
```
#### Limiting the number of concurrent requests (optional)
| Option | Value | Description |
| :--------------- | :------- | :-------------- |
| limitConcurrency | 255 | default |
| limitConcurrency | Infinity | no limits |
| limitConcurrency | n | only 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)
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`
```ts
import { DataHttpClientModule } from '@angular-ru/http';
@NgModule({
imports: [
// ...
DataHttpClientModule.forRoot([ApiUsersClient], {
// ...
limitConcurrency: 5
})
]
// ...
})
export class AppModule {}
```
