Angular9 準備工作

要想使用 HttpClient，就要先導(dǎo)入 Angular 的 HttpClientModule。大多數(shù)應(yīng)用都會在根模塊 AppModule 中導(dǎo)入它。

Path："app/app.module.ts (excerpt)" 。

import { NgModule }         from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  imports: [
    BrowserModule,
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

然后，你可以把 HttpClient 服務(wù)注入成一個應(yīng)用類的依賴項，如下面的 ConfigService 例子所示。

Path："app/config/config.service.ts (excerpt)" 。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) { }
}

HttpClient 服務(wù)為所有工作都使用了可觀察對象。你必須導(dǎo)入示例代碼片段中出現(xiàn)的 RxJS 可觀察對象和操作符。比如 ConfigService 中的這些導(dǎo)入就很典型。

Path："app/config/config.service.ts (RxJS imports)" 。

import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

注：

• 該實例應(yīng)用不需要數(shù)據(jù)服務(wù)器。它依賴于 Angular in-memory-web-api，它替代了 HttpClient 模塊中的 HttpBackend。這個替代服務(wù)會模擬 REST 式的后端的行為。