You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Dec 4, 2017. It is now read-only.
The http call in `HeroSearchService` is not that different from our previous http calls, but we no longer call `toPromise`. This means we will return an observable instead of a promise.
400
+
The `http.get` call in `HeroSearchService` is similar to the `http.get` call in the `HeroService`.
401
+
The notable difference: we no longer call `toPromise`.
We start the observable chain by calling `asObservable` on our `Subject` to return an observable that represents text changes as we are typing into the search box.
428
+
We're binding to that `search` subject in our template.
429
+
The user is sending it a stream of strings, the filter criteria for the name search.
411
430
412
-
### debounceTime(300)
413
-
By specifying a debounce time of 300 ms we are telling `RxJs` that we only want to be notified of key events after intervals of 300 ms. This is a performance measure meant to prevent us from hitting the api too often with partial search queries.
431
+
A `Subject` is also an `Observable`.
432
+
We're going to access that `Observable` and append operators to it that turn the stream
433
+
of strings into a stream of `Hero[]` arrays.
434
+
435
+
Each user keystroke could result in a new http request returning a new Observable array of heroes.
414
436
415
-
### distinctUntilChanged
416
-
`distinctUntilChanged` tells `RxJs` to only react if the value of the textbox actually changed.
437
+
This could be a very chatty, taxing our server resources and burning up our cellular network data plan.
438
+
Fortunately we can chain `Observable` operators to reduce the request flow
439
+
and still get timely results. Here's how:
417
440
418
-
### switchMap
419
-
`switchMap` is where observables from key events and observables from http calls converge on a single observable.
* The `asObservable` operator casts the `Subject` as an `Observable` of filter strings.
420
444
421
-
Every qualifying key event will trigger an http call, so we may get into a situation where we have multiple http calls in flight.
445
+
* `debounceTime(300)` waits until the flow of new string events pauses for 300 milliseconds
446
+
before passing along the latest string. We'll never make requests more frequently than 300ms.
422
447
423
-
Normally this could lead to results being returned out of order, but `switchMap` has built in support for ensuring that only the most recent http call will be processed. Results from prior calls will be discarded.
448
+
* `distinctUntilChanged` ensures that we only send a request if the filter text changed.
449
+
There's no point in repeating a request for the same search term.
424
450
425
-
We short circuit the http call and return an observable containing an empty array if the search box is empty.
451
+
* `switchMap` calls our search service for each search term that makes it through the `debounce` and `distinctUntilChanged` gauntlet.
452
+
It discards previous search observables, returning only the latest search service observable.
426
453
427
-
### subscribe
428
-
`subscribe` is similar to `then` in the promise world.
429
-
430
-
The first callback is the success callback where we grab the result of the search and assign it to our `heroes` array.
431
-
432
-
The second callback is the error callback. This callback will execute if there is an error - either from the http call or in our processing of key events.
433
-
434
-
In our current implementation we are just logging the error to the console, but a real life application should do better.
454
+
.l-sub-section
455
+
:marked
456
+
The [switchMap operator](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md)
457
+
(formerly known as "flatMapLatest") is very clever.
458
+
459
+
Every qualifying key event can trigger an http call.
460
+
Even with a 300ms pause between requests, we could have multiple http requests in flight
461
+
and they may not return in the order sent.
462
+
463
+
`switchMap` preserves the original request order while returning
464
+
only the observable from the most recent http call.
465
+
Results from prior calls will be discarded.
435
466
436
-
### Import operators
437
-
The `RxJs` operators are not included by default, so we have to include them using `import` statements.
467
+
We also short-circuit the http call and return an observable containing an empty array
468
+
if the search text is empty.
469
+
:marked
470
+
* `catch` intercepts a failed observable.
471
+
Our simple example prints the error to the console; a real life application should do better.
472
+
Then it re-throws the failed observable so that downstream processes know it failed.
473
+
The `AsyncPipe` in the template is downstream. It sees the failure and ignores it.
474
+
475
+
### Import RxJS operators
476
+
The RxJS operators are not available in Angular's base `Observable` implementation.
477
+
We have to extend `Observable` by *importing* them.
438
478
439
-
We have combined all operator imports in a single file.
479
+
We could extend `Observable` with just the operators we need here by
480
+
including the pertinent `import` statements at the top of this file.
0 commit comments