docs(server): add `do` to peek at results in console

This commit is contained in:
Ward Bell 2016-02-01 16:49:24 -08:00
parent 4c0a2a3b83
commit b2b025aab7
2 changed files with 33 additions and 14 deletions

View File

@ -18,11 +18,14 @@ export class HeroService {
// #docregion methods
// #docregion error-handling
getHeroes () {
// #docregion http-get
// #docregion http-get, http-get-v1
return this.http.get(this._heroesUrl)
.map(res => <Hero[]> res.json().data)
// #enddocregion v1, http-get-v1, error-handling
.do(data => console.log(data)) // eyeball results in the console
// #docregion v1, http-get-v1, error-handling
.catch(this.handleError);
// #enddocregion http-get
// #enddocregion http-get, http-get-v1
}
// #enddocregion error-handling
// #enddocregion v1

View File

@ -92,7 +92,7 @@ figure.image-display
With our basic intuitions about the component squared away, we can turn to development of the backend data source
and the client-side `HeroService` that talks to it.
### Fetching data
### Fetch data
In many of our previous samples we faked the interaction with the server by
returning mock heroes in a service like this one:
@ -112,7 +112,7 @@ figure.image-display
+makeExample('server-communication/ts/index.html', 'http', 'index.html')(format=".")
:marked
Look closely at how we call `http.get`
+makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get', 'app/toh/hero.service.ts (http.get)')(format=".")
+makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get-v1', 'app/toh/hero.service.ts (http.get)')(format=".")
:marked
We pass the resource URL to `get` and it calls the server which returns
data from the `heroes.json` file.
@ -159,7 +159,7 @@ figure.image-display
:marked
### Map the response object
Let's come back to the `HeroService` and look at the `http.get` call again to see why we needed `map()`
+makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get', 'app/toh/hero.service.ts (http.get)')(format=".")
+makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get-v1', 'app/toh/hero.service.ts (http.get)')(format=".")
:marked
The `response` object does not hold our data in a form we can use directly.
It takes an additional step &mdash; calling `response.json()` &mdash; to transform the bytes from the server into a JSON object.
@ -211,15 +211,31 @@ figure.image-display
It sets an `errorMessage` variable which we've bound conditionally in the template.
+makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'getHeroes', 'app/toh/hero-list.component.ts (getHeroes)')(format=".")
.l-sub-section
:marked
Try messing with the value of the api endpoint in the `HeroService` and watch it fail
+makeExample('server-communication/ts/app/toh/hero.service.ts', 'endpoint', 'app/toh/hero.service.ts (endpoint)')
<a id="do"></a>
<a id="console-log"></a>
:marked
### Sending data to the server
### Peek at results in the console
During development we're often curious about the data returned by the server.
Logging to console without disrupting the flow would be nice.
The Observable `do` operator is perfect for the job.
It passes the input through to the output while we do something with a useful side-effect such as writing to console.
Slip it into the pipeline between `map` and `catch` like this.
+makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get', 'app/toh/hero.service.ts')(format=".")
:marked
Remember to comment it out before going to production!
<a id="update"></a>
<a id="post"></a>
.l-main-section
:marked
## Send data to the server
So far we've seen how to retrieve data from a remote location using Angular's built-in `Http` service.
Let's add the ability to create new heroes and save them in the backend.
@ -258,7 +274,7 @@ code-example(format="." language="javascript").
+makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'addHero', 'app/toh/hero-list.component.ts (addHero)')(format=".")
:marked
## Falling back to Promises
## Fall back to Promises
Although the Angular `http` client API returns an `Observable` we can turn it into a
[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) if we prefer.
@ -303,10 +319,10 @@ code-example(format="." language="javascript").
Learn more about observables to understand the implications and consequences of subscriptions.
:marked
## Communication with `JSONP`
## Get data with `JSONP`
We just learned how to make `XMLHttpRequests` using Angulars built-in `Http` service. This is the most common approach for
server Communication. It doesn't work in all scenarios though.
server communication. It doesn't work in all scenarios though.
For security reasons web browser do not permit to make `XHR` calls if the origin of the remote server is different from the one the web page runs in.
The origin is defined as the combination of URI scheme, hostname and port number. The policy that prevents such `XHR` requests is called [Same-origin Policy](https://en.wikipedia.org/wiki/Same-origin_policy) accordingly.
@ -320,7 +336,7 @@ code-example(format="." language="javascript").
But let's not go too deep into the rabbit hole of `JSONP`. If you like to learn how this technique works under the cover, you may like to read up on this [answer](http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about/2067584#2067584) on StackOverflow.
For now, let's focus on how we can use `JSONP` in Angular.
### Let's fetch some data from wikipedia
### Search wikipedia
Wikipedia offers a `JSONP` search api. Let's build a simple search that shows suggestions from wikipedia as we type in a text box.
figure.image-display
@ -368,7 +384,7 @@ code-example.
There are a bunch of things in our wikipedia demo that we could do better. This is a perfect opportunity to show off some nifty
`Observable` tricks that can make server communication much simpler and more fun.
## Taking advantage of Observables
## More fun with Observables
If you ever wrote a search-as-you-type control yourself before, you are probably aware of some typical corner cases that arise with this task.