Angular6学习笔记13：HTTP（3

深碍√TFBOYSˉ_ 2022-05-08 07:42 211阅读 0赞

# 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 操作符][switchMap]， 每个有效的击键事件都会触发一次 `HttpClient.get()` 方法调用。 即使在每个请求之间都有至少 300ms 的间隔，仍然可能会同时存在多个尚未返回的 HTTP 请求。

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

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

[switchMap]: http://www.learnrxjs.io/operators/transformation/switchmap.html