Перейти к содержанию

HTTP: настройка для взаимодействия с сервером

📅 03.11.2022

Прежде чем использовать HttpClient, необходимо импортировать модуль Angular HttpClientModule. Большинство приложений делают это в корневом AppModule.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
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 в качестве зависимости класса приложения, как показано в следующем примере ConfigService.

1
2
3
4
5
6
7
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

Сервис HttpClient использует observables для всех транзакций. Вы должны импортировать RxJS observable и символы операторов, которые появляются в фрагментах примера.

Эти импорты ConfigService являются типичными.

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

Вы можете запустить пример, который сопровождает данное руководство.

Пример приложения не требует сервера данных. Он полагается на Angular in-memory-web-api, который заменяет HttpBackend модуля HttpClient.

Заменяющий сервис имитирует поведение REST-подобного бэкенда.

Посмотрите на AppModule imports, чтобы увидеть, как он настроен.

Комментарии