Angular学习笔记11：HTTP(1)

﹏ヽ暗。殇╰゛Y 2022-05-08 07:36 263阅读 0赞

# HTTP #

继学习笔记10后，可以在路由器中配置相关路由使用户可在不同的视图切换。

在一个实际的项目中，数据使来自远端的服务器上的，在Angular中，Angular通过HttpClient与远端服务器进行通讯。

## 模拟数据服务器 ##

使用 [内存 Web API（*In-memory Web API*）][Web API_In-memory Web API] 模拟出的远程数据服务器通讯（在实际项目中不使用这个模块，在这里只是模拟后端数据）。

### a. 安装in-memory-web-api ###

1.  `bogon:demo wjy$ npm install angular-in-memory-web-api --save`
2.  `+ angular-in-memory-web-api@0.6.1`
3.  `added 1 package in 51.529s`

### b.在app.module.ts 导入HttpClientInMemoryWebApiModule，HttpClient ###

1.  `import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';`
2.  `import {HttpClientModule} from '@angular/common/http';`

### c.把 `HttpClientInMemoryWebApiModule` 添加到 `@NgModule.imports` 数组中（放在 `HttpClient` 之后）， 然后使用 `InMemoryDataService` 来配置它。 ###

1.  `HttpClientModule,`
2.  `HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {dataEncapsulation: false}),`

`forRoot()` 配置方法接受一个 `InMemoryDataService` 类（初期的内存数据库）作为参数。

### d.创建一个数据服务：in-memory-data ###

1.  `bogon:demo wjy$ ng generate service InMemoryData`
2.  `CREATE src/app/in-memory-data.service.spec.ts (412 bytes)`
3.  `CREATE src/app/in-memory-data.service.ts (141 bytes)`

在AppModule中引入InMemoryDataService

import {InMemoryDataService} from './in-memory-data.service';

这个文件代替了之前的 `mock-heroes.ts，此时这个时候就可以安全的删除mock-heroes.ts。`

`当在后期可以从服务器获取数据的时候，就可以删除现在这个文件了。`

## Hero与HTTP ##

### a.导入一些需要的HTTP符号： ###

import { HttpClient, HttpHeaders } from '@angular/common/http';

### b.把 `HttpClient` 注入到构造函数中一个名叫 `http` 的私有属性中。 ###

1.  `constructor(`
2.  `private http: HttpClient,`
3.  `private messageService: MessageService) { }`

### c.保留对 `MessageService` 的注入。你将会频繁调用它，因此请把它包裹进一个私有的 `log` 方法中。 ###

1.  `private log(message: string) {`
2.  ``this.messageService.add(`HeroService: ${message}`);``
3.  `}`

### d.把服务器上英雄数据资源的访问地址定义为 `heroesURL`。 ###

private heroesUrl = 'api/heroes';

## 通过 HttpClient 获取英雄 ##

修改当前的 `HeroService.getHeroes()` 使用 HttpClient 来模拟英雄数据返回为 `Observable<Hero[]>` 格式。

1.  `getHeroes (): Observable<Hero[]> {`
2.  `return this.http.get<Hero[]>(this.heroesUrl)`
3.  `}`

保存，刷新浏览器，应用就会模拟服务器被成功读取。

但是在这里并没有修改查看hero详情的函数，但是在此刻应用并没有报错。这里是因为： of / HttpClient  返回的都是`Observable<Hero[]>`。

## Http 方法返回单个值 ##

所有的 `HttpClient` 方法都会返回某个值的 RxJS `Observable`。

HTTP 是一个请求/响应式协议。你发起请求，它返回单个的响应。

通常，`Observable` *可以*在一段时间内返回多个值。 但来自 `HttpClient` 的 `Observable` 总是发出一个值，然后结束，再也不会发出其它值。

具体到这次 `HttpClient.get` 调用，它返回一个 `Observable<Hero[]>`，在这里“返回的这个Hero数组是可观察对象”。在实践中，它也只会返回一个英雄数组。

## `HttpClient.get` 返回响应数据 ##

`HttpClient.get` 默认情况下把响应体当做无类型的 JSON 对象进行返回。 如果指定了可选的模板类型 `<Hero[]>`，就会给返回你一个类型化的对象。JSON 数据的具体形态是由服务器的数据 API 决定的。 *英雄指南*的数据 API 会把英雄数据作为一个数组进行返回。

## 错误处理 ##

有时候在从后端获取数据，可能会因为一些其他原因，发生一些错误。此刻，在`HttpClient.get（）方法中应该捕获错误，并做适当的处理，如果要捕获错误，就需要`使用 RxJS 的 `catchError()` 操作符来**建立对 Observable 结果的处理管道（pipe）**。

从 `rxjs/operators` 中导入 `catchError` 符号。

import { catchError} from 'rxjs/operators';

使用 `.pipe()` 方法来扩展 `Observable` 的结果，并给它一个 `catchError()` 操作符

1.  `getHeroes (): Observable<Hero[]> {`
2.  `return this.http.get<Hero[]>(this.heroesUrl)`
3.  `.pipe(`
4.  `catchError(this.handleError('getHeroes', []))`
5.  `);`
6.  `}`

此时在this.handleError('getHeroes',\[\]),这里会报错，是因为，暂时还没有声明这个方法。

`catchError()` 操作符会拦截**失败的 `Observable`**。 它把错误对象传给*错误处理器*，*错误处理器*会处理这个错误。

## handleError ##

在实际的项目中，很多component都需要从远端服务器获取数据，这过程中可能会需要很多的请求，而这么多的请求中都有可能会发生错误，在发生错误的时候，就需要将用类似的 handleError（）这种方法，如此之来，handleError（） 将会在很多 `HeroService` 的方法之间共享，所以要把它**通用化**，以支持这些彼此不同的需求。它不再直接处理这些错误，而是返回给 `catchError` 返回一个*错误处理*函数。还要用操作名和出错时要返回的安全值来对这个错误处理函数进行配置。

1.  `private handleError<T> (operation = 'operation', result?: T) {`
2.  `return (error: any): Observable<T> => {`
3.  `console.error(error); // log to console instead`
4.  ``this.log(`${operation} failed: ${error.message}`);``
5.  `return of(result as T);`
6.  `};`
7.  `}`

在这个handleError中，处理错误的方法是：在控制台中汇报了这个错误之后，这个处理器会汇报一个用户友好的消息，并给应用返回一个安全值，使它可以继续工作。因为每个服务方法都会返回不同类型的 `Observable` 结果，因此 handleError`()` 也需要一个类型参数，以便它返回一个此类型的安全值，正如应用所期望的那样。

## 窥探 `Observable` ##

`HeroService` 的方法将会窥探 `Observable` 的数据流，并通过 `log()` 函数往页面底部发送一条消息。

它们可以使用 RxJS 的 `tap` 操作符来实现，该操作符会*查看* Observable 中的值，使用那些值做一些事情，并且把它们传出来。 这种 `tap` 回调不会改变这些值本身。

a.在HeroService中导入：tap

import {catchError, tap} from 'rxjs/operators';

b.修改getHeroes();

1.  `getHeroes(): Observable<Hero[]> {`
2.  `return this.http.get<Hero[]>(this.heroesUrl)`
3.  `.pipe(`
4.  `tap(heroes => {`
5.  `console.log(heroes);`
6.  `this.log('fetched heroes');`
7.  `}),`
8.  `catchError(this.handleError('getHeroes', []))`
9.  `);`
10. `}`

在这里可以打印出来获取到的heroes；在控制台可以看到如下信息：

![70][]

## 通过ID去获取hero信息 ##

在实际项目中，有时候会遇到一个某种一系列类似事物的列表，然后要查看这个一系列中的某一个的详细信息，此时可能就会需要类似于通过 `api/hero/:id` 的形式（比如 `api/hero/:id` ）获取这个单个对象的全部信息，修改 `HeroService.getHero()` 方法来发起请求

1.  `getHero(id: number): Observable<Hero> {`
2.  ``const url = `${this.heroesUrl}/${id}`;``
3.  `return this.http.get<Hero>(url).pipe(`
4.  ``tap(_ => this.log(`fetched hero id=${id}`)),``
5.  ``catchError(this.handleError<Hero>(`getHero id=${id}`))``
6.  `);`
7.  `}`

`这里的getHeroes()和修改前的`相比有三个显著的差异。

*  它使用想获取的英雄的 id 构建了一个请求 URL。
 *  服务器应该使用单个英雄作为回应，而不是一个英雄数组。
 *  所以，`getHero` 会返回 `Observable<Hero>`（“一个可观察的*单个hero对象*”），而不是一个可观察的hero对象*数组*。

[Web API_In-memory Web API]: https://github.com/angular/in-memory-web-api
[70]: /images/20220508/a6d645cda2ae408bb46ce8333d8924c1.png