ng-http-sugar
v0.1.1
Published
Syntactic sugar for Angular's built-in HttpClient
Downloads
7
Readme
HTTP Sugar
Syntactic sugar for Angular's built-in HttpClient
Requires Angular 6.0.0 or later.
License: GPL 2.0 or later.
What it does
This currently only supports POST
requests. GET
and other types that HttpClient
supports are not yet supported.
Code Example
Without this, here's what you need to do to make an HTTP POST
request with headers parameters, and callbacks for success and error responses using Angular's included HttpService
:
import { Injectable } from '@angular/core';
import {
HttpClient,
HttpHeaders,
HttpParams
} from '@angular/common/http';
@Injectable()
export class MyService {
constructor(httpService: HttpService) {}
mySuccessCallback(payload: any, responseData: any) {
/* do something with success response */
}
myErrorCallback(payload: any, error: any) {
/* do something with error response */
}
public methodThatMakesARequest(): void {
// API route for your request
let apiRoute = 'https://example.com/api/endpoint';
// Payload to send with your request
let myPayload = { /* payload */ };
// Prepare request headers
myRequestHeaders: Array<{name: string, value: string}> = [
/* add request headers here, e.g.: */
{name: 'SomeHeader', value: 'SomeValue'},
];
let headerArg = new HttpHeaders();
headers.forEach((header) => {
headerArg = headerArg.set(header.name,header.value);
});
// Include default 'content-type' header
// (This is included by HttpService in the next example)
if (! headerArg.has('Content-Type')) {
headerArg = headerArg.set('Content-Type','application/json');
}
// Prepare request params
myRequestParams: Array<{id: string, value: string}> = [
/* add request params here, e.g.: */
{id: 'SomeParam', value: 'SomeValue'},
];
let paramsArg = new HttpParams();
params.forEach((header) => {
paramsArg = paramsArg.set(params.id,params.value);
});
this.httpService.post(
apiRoute,
myPayload,
{
headers: headerArg,
params: paramsArg,
}
).subscribe(
data => {
mySuccessCallback(myPayload,data);
},
error => {
myErrorCallback(myPayload,error);
}
);
}
}
With HttpService
, you can make the same request much more compactly:
import { Injectable } from '@angular/core';
import { HttpService } from 'ng-http-sugar';
@Injectable()
export class MyService {
constructor(private _http: HttpService) {}
mySuccessCallback(payload: any, responseData: any) {
/* do something with success response */
}
myErrorCallback(payload: any, error: any) {
/* do something with error response */
}
public methodThatMakesARequest(): void {
// API route for your request
let apiRoute = 'https://example.com/api/endpoint';
// Payload to send with your request
let myPayload = { /* payload */ };
// Optional array of request header name/value objects
myRequestHeaders: Array<{name: string, value: string}> = [
/* add request headers here, e.g.: */
{name: 'SomeHeader', value: 'SomeValue'},
];
// Optional array of request param id/value objects
myRequestParams: Array<{id: string, value: string}> = [
/* add request params here, e.g.: */
{id: 'SomeParam', value: 'SomeValue'},
];
// This handles preparing HttpHeaders and HttpParams for you, as well
// as subscribing to the response observable to fire callbacks needed.
this._http.post(
apiRoute,
myPayload,
myRequestHeaders, // optional
myRequestParams, // optional
this.mySuccessCallback, // optional
this.myErrorCallback, // optional
);
}
}
What's Included
HttpSugar
is this module. Include it in your Angular application to use its functionality.HttpService
is an injectable Angular service you can use in your own services, in place ofHttpClient
and its helper types.
How to Use
Including in your application
- Include this module in your Angular 6.x or later project with
npm install --save 'ng-http-sugar'
. - Import the
HttpSugarModule
into your application's root module fromng-http-sugar
- Where needed in your application's code, import the following from the module to make calls on:
import { HttpService } from 'ng-http-sugar';
Roadmap
- Add test coverage!
- Support
GET
requests - Support
PUT
requests - Support
PATCH
requests - Support
DELETE
requests - Maybe support Angular
4.x
and later, instead of6.x
and later?- Upgrading from
4.x
to6.x
isn't terribly onerous in most cases, so I'll only work on this if I get requests for it.
- Upgrading from
Maintenance
Build
Run ng build http-sugar --prod
to build the library. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Publish updates to NPM
# manually increment version in package.json
# avoid git tags since we're publishing from `dist/` later
npm --no-git-tag-version -f version [major|minor|patch]
# build
ng build http-sugar --prod
# switch to built package
cd dist/http-sugar/
# publish update npm
npm publish
Run tests
There currently are no tests!
- Run
ng test
to execute the unit tests via Karma. - Run
ng e2e
to execute the end-to-end tests via Protractor.