This is the home of angular2 http, a collection of utility classes for http related services. All of these services are collected from different open source projects
npm install @angular-util/http --save
HttpService is a wrapper around angular's Http with same API as Http. HttpService provides options to intercept request, response and response error. This class is directly lifted from https://github.com/Teradata/covalent.git
To add a desired interceptor, it needs to implement the [HttpInterceptor] interface.
export interface HttpInterceptor {
onRequest?: (requestOptions: RequestOptionsArgs) => RequestOptionsArgs;
onResponse?: (response: Response) => Response;
onResponseError?: (error: Response) => Response;
}Every method is optional, so you can just implement the ones that are needed.
Example:
import { Injectable } from '@angular/core';
import { HttpInterceptor } from '@covalent/http';
@Injectable()
export class CustomInterceptor implements HttpInterceptor {
onRequest(requestOptions: RequestOptionsArgs): RequestOptionsArgs {
... // do something to requestOptions
return requestOptions;
}
onResponse(response: Response): Response {
... // check response status and do something
return response;
}
onResponseError(error: Response): Response {
... // check error status and do something
return error;
}
}Also, you need to bootstrap the interceptor providers
@NgModule({
declarations: [
...
],
imports: [
...
],
exports: [
...
]
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: [
provideHttpService([CustomInterceptor])
]
};
}
}After that, just inject [HttpService] and use it for your requests.
Resource class provides convinient access to your restful backend service. You will need to extend Resource class to create a service to access your backend. All methods return a Observable
@Injectable()
@ResourceConfig({url: '/api/users'})
export class UserResource extends Resource<User> {
constructor(http: HttpService) {
super(http);
}
}A simple UserResource defined above will give you access to the following methods.
Result is always converted to JSON by default, so if your backend service returns JSON you don't have to map result to json.
Signature: findOne(@Path('id') id: string|number): Observable<T>
Target URL: GET /api/users/{id}
Usage:
userResource.findOne(12)
.subscribe(
res => {
// Do something with success response
},
err => {
// Do something with error
});Signature: save(body: any): Observable<T>
Target URL: POST /api/users
Usage:
userResource.save(someUserObject)
.subscribe( ... );Signature: update(id: string|number, body: any): Observable<T>
Target URL: PUT /api/users/{id}
Usage:
userResource.update(12, someUserObject)
.subscribe( ... );Signature: delete(id: string|number): Observable<T>
Target URL: DELETE /api/users/{id}
Usage:
userResource.delete(12)
.subscribe(...);Signature: update(id: string|number, body: any): Observable<T>
This method can be used for query and search screens
Target URL: GET /api/users
Usage:
userResource.find(someQueryObject)
.subscribe( ... );The code below shows how to extend UserResource with a new method to query roles for a user
@Injectable()
@ResourceConfig({url: '/api/users'})
export class UserResource extends Resource<User> {
constructor(http: HttpService) {
super(http);
}
@GET('/{id}/roles')
findRoles(@Path('id') id:number): Observable<List<Role>>> {
return null; // Return null as actual return is handled by @GET decorator
}
}Now you can use this new method as
userResource.findRoles(12)
.subscribe( ... );| Decorator type | Decorator | Description | Usage |
|---|---|---|---|
| Request Method |
@GET(url?: string)
|
This decorator is used for indicating HTTP request method to be used for http request.
The url parameter to this decorator is added to base url parameter (specified by @ResourceConfig)
|
|
@POST(url?: string) |
|||
@PUT(url?: string) |
|||
@DELETE(url?: string) |
|||
| Method Parameter |
@Path(key: string|number)
|
Used for replacing a URL path placeholder with the method parameter value | In this example url path placeholder {id} will be replaced with values of paramater to method call
|
@Query
|
Used for replacing a URL path placeholder with the method parameter value | In this example each key of objects pageRequest and searchParams will be added to the URL as parameters.
|
|
@Body
|
The indicated parameter will be sent as body of the request | In this example roles object will be stringified and sent and body of the http request.
|
|
@Header
|
The indicated parameter will be sent as header of the request | In this example a request header secretKey with value as key will be sent with the http request.
|
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent