feat(common): accept object map for HttpClient headers & params (#18490)

Today, constructing a new GET request with headers looks like:

const headers = new HttpHeaders({
  'My-Header': 'header value',
});
http.get('/url', {headers}).subscribe(...);

This indirection is unnecessary. It'd be more ergonomic to write:

http.get('/url', {headers: {'My-Header': 'header value'}}).subscribe(...);

This commit allows that new syntax, both for HttpHeaders and HttpParams.
In the HttpParams case it also allows construction of HttpParams with a map.

PR Close #18490
This commit is contained in:
Alex Rickabaugh 2017-08-01 15:43:39 -07:00 committed by Jason Aden
parent 65e26d713c
commit 1b1d5f10a1
4 changed files with 1141 additions and 503 deletions

File diff suppressed because it is too large Load Diff

View File

@ -89,10 +89,24 @@ export class HttpParams {
constructor(options: { constructor(options: {
fromString?: string, fromString?: string,
fromObject?: {[param: string]: string | string[]},
encoder?: HttpParameterCodec, encoder?: HttpParameterCodec,
} = {}) { } = {}) {
this.encoder = options.encoder || new HttpUrlEncodingCodec(); this.encoder = options.encoder || new HttpUrlEncodingCodec();
this.map = !!options.fromString ? paramParser(options.fromString, this.encoder) : null; if (!!options.fromString) {
if (!!options.fromObject) {
throw new Error(`Cannot specify both fromString and fromObject.`);
}
this.map = paramParser(options.fromString, this.encoder);
} else if (!!options.fromObject) {
this.map = new Map<string, string[]>();
Object.keys(options.fromObject).forEach(key => {
const value = (options.fromObject as any)[key];
this.map !.set(key, Array.isArray(value) ? value : [value]);
});
} else {
this.map = null;
}
} }
/** /**

View File

@ -39,6 +39,16 @@ export function main() {
}); });
backend.expectOne('/test').flush('hello world'); backend.expectOne('/test').flush('hello world');
}); });
it('with headers', (done: DoneFn) => {
client.get('/test', {headers: {'X-Option': 'true'}}).subscribe(() => done());
const req = backend.expectOne('/test');
expect(req.request.headers.get('X-Option')).toEqual('true');
req.flush({});
});
it('with params', (done: DoneFn) => {
client.get('/test', {params: {'test': 'true'}}).subscribe(() => done());
backend.expectOne('/test?test=true').flush({});
});
it('for an arraybuffer', (done: DoneFn) => { it('for an arraybuffer', (done: DoneFn) => {
const body = new ArrayBuffer(4); const body = new ArrayBuffer(4);
client.get('/test', {responseType: 'arraybuffer'}).subscribe(res => { client.get('/test', {responseType: 'arraybuffer'}).subscribe(res => {
@ -69,6 +79,7 @@ export function main() {
it('that returns a stream of events', (done: DoneFn) => { it('that returns a stream of events', (done: DoneFn) => {
client.get('/test', {observe: 'events'}).toArray().toPromise().then(events => { client.get('/test', {observe: 'events'}).toArray().toPromise().then(events => {
expect(events.length).toBe(2); expect(events.length).toBe(2);
let x = HttpResponse;
expect(events[0].type).toBe(HttpEventType.Sent); expect(events[0].type).toBe(HttpEventType.Sent);
expect(events[1].type).toBe(HttpEventType.Response); expect(events[1].type).toBe(HttpEventType.Response);
expect(events[1] instanceof HttpResponse).toBeTruthy(); expect(events[1] instanceof HttpResponse).toBeTruthy();

File diff suppressed because it is too large Load Diff