Angular6学习笔记13：HTTP（3

HTTP

继学习笔记12以后，可以模拟向后端发送get/post/put/delete请求了。在项目中，有一个table，这个table的数据非常多，就好比现在的heroList，需要根据用户输入的信息发送给远端服务器，让远端服务器通过这个信息，返回搜索结果。现在要检索heroList中的信息，就需要一个输入框，让用户输入检索的值，然后将这个值发送给远端服务器（模拟），然后让远端服务器（模拟）返回检索的结果。

1.在heroService中创建一个关于搜索的方法：searchHeroes（）

1. searchHeroes(term: string): Observable<Hero[]> {

2. if (!term.trim()) {

3. return of([]);

4. }

5. return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(

6. tap(_ => this.log(`found heroes matching "${term}"`)),

7. catchError(this.handleError<Hero[]>('searchHeroes', []))

8. );

9. }

在这个方法中，当没有搜素词，则返回一个空的数组，当有搜索词的时候，在url中拼接上name

2.在仪表盘的组件中添加搜索功能

1. <h3>Top Heroes</h3>

2. <div class="grid grid-pad">

3. <a *ngFor="let hero of heroes" class="col-1-4"

4. routerLink="/detail/{{hero.id}}">

5. <div class="module hero">

6. <h4>{{hero.name}}</h4>

7. </div>

8. </a>

9. </div>

10.  

11. <app-hero-search></app-hero-search>

这里会让这个应用挂了，因为找不到<app-hero-search></app-hero-search>（接下来创建）

3.创建HeroSearchComponent

利用angular CLI 创建组件

ng generate component hero-search

CLI 生成了 HeroSearchComponent 的三个文件，并把该组件添加到了 AppModule 的声明中。

修改HeroSearch组件的模版文件：

1. <div id="search-component">

2. <h4>Hero Search</h4>

3. <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />

4. <ul class="search-result">

5. <li *ngFor="let hero of heroes$ | async" >

6. <a routerLink="/detail/{{hero.id}}">

7. {{hero.name}}

8. </a>

9. </li>

10. </ul>

11. </div>

在模版文件中，创建了keyup 事件，这个keyup事件绑定会调用该组件的 search() 方法，并传入新的搜索框的值。

*ngFor 是在一个名叫 heroes$ 的列表上迭代，在这里$ 是一个命名惯例，用来表明 heroes$ 是一个 Observable，而不是数组。

正常情况下，*ngFor是不能直接使用Observable，此时，就要用到管道，利用管道字符（|），后面紧跟着一个 async，它表示 Angular 的 AsyncPipe，AsyncPipe 会自动订阅到 Observable，这样你就不用再在组件类中订阅了。

美化这个HeroSearch组件，修改heroSearch的CSS文件

1. .search-result li {

2. border-bottom: 1px solid gray;

3. border-left: 1px solid gray;

4. border-right: 1px solid gray;

5. width:195px;

6. height: 16px;

7. padding: 5px;

8. background-color: white;

9. cursor: pointer;

10. list-style-type: none;

11. }

12.  

13. .search-result li:hover {

14. background-color: #607D8B;

15. }

16.  

17. .search-result li a {

18. color: #888;

19. display: block;

20. text-decoration: none;

21. }

22.  

23. .search-result li a:hover {

24. color: white;

25. }

26. .search-result li a:active {

27. color: white;

28. }

29. #search-box {

30. width: 200px;

31. height: 20px;

32. }

33.  
34.  

35. ul.search-result {

36. margin-top: 0;

37. padding-left: 0;

38. }

修改HeroSearch 的类文件

1. import { Component, OnInit } from '@angular/core';

2.  

3. import { Observable, Subject } from 'rxjs';

4.  

5. import {

6. debounceTime, distinctUntilChanged, switchMap

7. } from 'rxjs/operators';

8.  

9. import { Hero } from '../hero';

10. import { HeroService } from '../hero.service';

11.  

12. @Component({

13. selector: 'app-hero-search',

14. templateUrl: './hero-search.component.html',

15. styleUrls: [ './hero-search.component.css' ]

16. })

17. export class HeroSearchComponent implements OnInit {

18. heroes$: Observable<Hero[]>;

19. private searchTerms = new Subject<string>();

20.  

21. constructor(private heroService: HeroService) {}

22.  

23. // Push a search term into the observable stream.

24. search(term: string): void {

25. this.searchTerms.next(term);

26. }

27.  

28. ngOnInit(): void {

29. this.heroes$ = this.searchTerms.pipe(

30. // wait 300ms after each keystroke before considering the term

31. debounceTime(300),

32.  

33. // ignore new term if same as previous term

34. distinctUntilChanged(),

35.  

36. // switch to new search observable each time the term changes

37. switchMap((term: string) => this.heroService.searchHeroes(term)),

38. );

39. }

40. }

注意，heroes$ 声明为一个 Observable

a.RxJS Subject 类型的 searchTerms

Subject 既是可观察对象的数据源，本身也是 Observable。可以像订阅任何 Observable 一样订阅 Subject。还可以通过调用它的 next(value) 方法往 Observable 中推送一些值，就像 search() 方法中一样。search() 是通过对文本框的 keystroke 事件的事件绑定来调用的。

1. private searchTerms = new Subject<string>();

2.  

3. search(term: string): void {

4. this.searchTerms.next(term);

5. }

每当用户在文本框中输入时，这个事件绑定就会使用文本框的值（搜索词）调用 search() 函数。 searchTerms 变成了一个能发出搜索词的稳定的流。

b.串联 RxJS 操作符

每当用户击键后就直接调用 searchHeroes() 将导致创建海量的 HTTP 请求，浪费服务器资源并消耗大量网络流量。

应该怎么做呢？ngOnInit() 往 searchTerms 这个可观察对象的处理管道中加入了一系列 RxJS 操作符，用以缩减对 searchHeroes() 的调用次数，并最终返回一个可及时给出英雄搜索结果的可观察对象（每次都是 Hero[] ）。

1. this.heroes$ = this.searchTerms.pipe(

2. debounceTime(300),

3. distinctUntilChanged(),

4. switchMap((term: string) => this.heroService.searchHeroes(term)),

5. );

• 在传出最终字符串之前，debounceTime(300) 将会等待，直到新增字符串的事件暂停了 300 毫秒。 你实际发起请求的间隔永远不会小于 300ms。

• distinctUntilChanged() 会确保只在过滤条件变化时才发送请求。

• switchMap() 会为每个从 debounce 和 distinctUntilChanged 中通过的搜索词调用搜索服务。 它会取消并丢弃以前的搜索可观察对象，只保留最近的。

借助 switchMap 操作符， 每个有效的击键事件都会触发一次 HttpClient.get() 方法调用。 即使在每个请求之间都有至少 300ms 的间隔，仍然可能会同时存在多个尚未返回的 HTTP 请求。

switchMap() 会记住原始的请求顺序，只会返回最近一次 HTTP 方法调用的结果。 以前的那些请求都会被取消和舍弃。

注意，取消前一个 searchHeroes() 可观察对象并不会中止尚未完成的 HTTP 请求。 那些不想要的结果只会在它们抵达应用代码之前被舍弃。