docs(http): show how to override default `RequestOptions` like headers (#2978)
This commit is contained in:
parent
05cdd9aa8a
commit
9a3cbd611f
|
@ -16,7 +16,8 @@ import { AppComponent } from './app.component';
|
||||||
declarations: [ AppComponent ],
|
declarations: [ AppComponent ],
|
||||||
bootstrap: [ AppComponent ]
|
bootstrap: [ AppComponent ]
|
||||||
})
|
})
|
||||||
export class AppModule { }
|
export class AppModule {
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,12 @@
|
||||||
|
// #docplaster
|
||||||
// #docregion
|
// #docregion
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
import { HttpModule, JsonpModule } from '@angular/http';
|
// #docregion override-default-options
|
||||||
|
import { HttpModule, JsonpModule, RequestOptions } from '@angular/http';
|
||||||
|
|
||||||
|
// #enddocregion override-default-options
|
||||||
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
|
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
|
||||||
import { HeroData } from './hero-data';
|
import { HeroData } from './hero-data';
|
||||||
|
|
||||||
|
@ -34,8 +37,14 @@ import { WikiSmartComponent } from './wiki/wiki-smart.component';
|
||||||
],
|
],
|
||||||
bootstrap: [ AppComponent ]
|
bootstrap: [ AppComponent ]
|
||||||
})
|
})
|
||||||
export class AppModule { }
|
// #docregion override-default-request-options
|
||||||
|
export class AppModule {
|
||||||
|
constructor(requestOptions: RequestOptions) {
|
||||||
|
// Set the default 'Content-Type' header
|
||||||
|
requestOptions.headers.set('Content-Type', 'application/json');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #enddocregion override-default-request-options
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,10 @@ block includes
|
||||||
The Angular documentation is a living document with continuous improvements.
|
The Angular documentation is a living document with continuous improvements.
|
||||||
This log calls attention to recent significant changes.
|
This log calls attention to recent significant changes.
|
||||||
|
|
||||||
|
## Http: how to set default request headers (and other request options) (2016-12-14)
|
||||||
|
Added section on how to set default request headers (and other request options) to
|
||||||
|
[Http](server-communication.html#override-default-request-options) guide.
|
||||||
|
|
||||||
## Testing: added component test plunkers (2016-12-02)
|
## Testing: added component test plunkers (2016-12-02)
|
||||||
Added two plunkers that each test _one simple component_ so you can write a component test plunker of your own: <live-example name="setup" plnkr="quickstart-specs">one</live-example> for the QuickStart seed's `AppComponent` and <live-example name="testing" plnkr="banner-specs">another</live-example> for the Testing guide's `BannerComponent`.
|
Added two plunkers that each test _one simple component_ so you can write a component test plunker of your own: <live-example name="setup" plnkr="quickstart-specs">one</live-example> for the QuickStart seed's `AppComponent` and <live-example name="testing" plnkr="banner-specs">another</live-example> for the Testing guide's `BannerComponent`.
|
||||||
Linked to these plunkers in [Testing](testing.html#live-examples) and [Setup anatomy](setup-systemjs-anatomy) guides.
|
Linked to these plunkers in [Testing](testing.html#live-examples) and [Setup anatomy](setup-systemjs-anatomy) guides.
|
||||||
|
|
|
@ -33,6 +33,7 @@ block includes
|
||||||
<li> [More fun with observables](#more-observables).</li>
|
<li> [More fun with observables](#more-observables).</li>
|
||||||
</ul>
|
</ul>
|
||||||
- [Guarding against Cross-Site Request Forgery](#xsrf).
|
- [Guarding against Cross-Site Request Forgery](#xsrf).
|
||||||
|
- [Override default request headers (and other request options)](#override-default-request-options).
|
||||||
- [Appendix: Tour of Heroes _in-memory web api_](#in-mem-web-api).
|
- [Appendix: Tour of Heroes _in-memory web api_](#in-mem-web-api).
|
||||||
|
|
||||||
A <live-example>live example</live-example> illustrates these topics.
|
A <live-example>live example</live-example> illustrates these topics.
|
||||||
|
@ -647,10 +648,42 @@ a#xsrf
|
||||||
|
|
||||||
See the [XSRF topic on the Security page](security.html#xsrf) for more information about XSRF and Angular's `XSRFStrategy` counter measures.
|
See the [XSRF topic on the Security page](security.html#xsrf) for more information about XSRF and Angular's `XSRFStrategy` counter measures.
|
||||||
|
|
||||||
|
a#override-default-request-options
|
||||||
|
.l-main-section
|
||||||
|
:marked
|
||||||
|
## Override default request headers (and other request options)
|
||||||
|
|
||||||
|
Request options (such as headers) are merged into the
|
||||||
|
[default _RequestOptions_](https://angular.io/docs/ts/latest/api/http/index/BaseRequestOptions-class.html "API: BaseRequestOptions")
|
||||||
|
before the request is processed.
|
||||||
|
The `HttpModule` provides these default options via the `RequestOptions` token.
|
||||||
|
|
||||||
|
You can override these defaults to suit your application needs.
|
||||||
|
The API docs suggest creating a custom sub-class of `RequestOptions`
|
||||||
|
and providing that as a replacement class for the `RequestOptions` token.
|
||||||
|
|
||||||
|
Perhaps an easier way is to inject the current `RequestOptions` instance
|
||||||
|
into an application module constructor and re-set its values directly.
|
||||||
|
This sample sets the default `Content-Type` header to JSON in the root `AppModule` constructor:
|
||||||
|
+makeExample('server-communication/ts/app/app.module.ts', 'override-default-request-options', 'app/app.module.ts (default request header override)')(format=".")
|
||||||
|
:marked
|
||||||
|
After this change, the `header` option setting in `HeroService.addHero` is no longer necessary,
|
||||||
|
|
||||||
|
+makeExample('server-communication/ts/app/toh/hero.service.ts', 'addhero', 'app/toh/hero.service.ts (addHero)')(format=".")
|
||||||
|
:marked
|
||||||
|
You can confirm this works by looking at the network tab.
|
||||||
|
If you're short-circuiting the server call with something like the [_in-memory web api_](#in-mem-web-api),
|
||||||
|
try commenting-out the `addHero` header option,
|
||||||
|
set a breakpoint on the POST call, and step through to the backend request
|
||||||
|
to verify the header is there.
|
||||||
|
|
||||||
|
Individual requests options, like this one, take precedence over the default `RequestOptions`.
|
||||||
|
It might be wise to keep the `addHero` request header setting for extra safety.
|
||||||
|
|
||||||
a#in-mem-web-api
|
a#in-mem-web-api
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Appendix: Tour of Heroes in-memory server
|
## Appendix: Tour of Heroes _in-memory web api_
|
||||||
|
|
||||||
If the app only needed to retrieve data, you could get the heroes from a `heroes.json` file:
|
If the app only needed to retrieve data, you could get the heroes from a `heroes.json` file:
|
||||||
- var _heroesJsonPath = (_docsFor == 'dart' ? 'web' : 'app') + '/heroes.json';
|
- var _heroesJsonPath = (_docsFor == 'dart' ? 'web' : 'app') + '/heroes.json';
|
||||||
|
|
Loading…
Reference in New Issue