HttpClient

HttpClient в @ angular / common / http предлагает упрощенный клиентский HTTP API для приложений Angular, который опирается на интерфейс XMLHttpRequest, предоставляемый браузерами. Дополнительные преимущества HttpClient включают в себя функции тестируемости, типизированные объекты запросов и ответов, перехват запросов и ответов, наблюдаемые API и оптимизированную обработку ошибок.

Настроить

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

Код TypeScript:

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_app.module.ts от w3resource ( @ w3resource ) в CodePen .

Импортировав HttpClientModule в AppModule, вы можете внедрить HttpClient в класс приложения, как показано ниже:

Код TypeScript:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) { }
}

Демонстрация в реальном времени:

См. Перо HttpClient_config.service.ts от w3resource ( @ w3resource ) на CodePen .

Получение данных JSON

Приложения часто запрашивают данные JSON с сервера. Например, приложению может потребоваться файл конфигурации на сервере config.json, в котором указаны URL-адреса ресурсов.

{
  "heroesUrl": "api/heroes",
  "textfile": "assets/textfile.txt"
}

ConfigService извлекает этот файл с помощью метода get () в HttpClient.

configUrl ='assets/config.json';
getConfig() {
  return this.http.get(this.configUrl);
}

Компонент, такой как ConfigComponent, внедряет ConfigService и вызывает метод сервиса getConfig.

showConfig() {
  this.configService.getConfig()
    .subscribe((data: Config) => this.config = {
        heroesUrl: data['heroesUrl'],
        textfile:  data['textfile']
    });
}

Поскольку метод службы возвращает Observable данных конфигурации, компонент подписывается на возвращаемое значение метода. Обратный вызов подписки копирует поля данных в объект конфигурации компонента, который привязан к данным в шаблоне компонента для отображения.

Читая полный ответ

Тело ответа не возвращает все данные, которые вам могут понадобиться. Иногда серверы возвращают специальные заголовки или коды состояния, чтобы указать определенные условия, которые важны для рабочего процесса приложения.

Скажите HttpClient, что вы хотите получить полный ответ с опцией наблюдения:

getConfigResponse(): Observable<HttpResponse<Config>> {
  return this.http.get<Config>(
    this.configUrl, { observe: 'response' });
}

Теперь HttpClient.get () возвращает Observable типизированного HttpResponse, а не только данные JSON.

Метод showConfigResponse () компонента отображает заголовки ответа, а также конфигурацию.

Обработка ошибок

Что произойдет, если запрос не будет выполнен на сервере или если плохое сетевое соединение не позволяет ему достичь сервера? HttpClient вернет объект ошибки вместо успешного ответа.

Вы можете обработать компонент, добавив второй обратный вызов в.subscribe ():

showConfig() {
  this.configService.getConfig()
    .subscribe(
      (data: Config) => this.config = { ...data }, // success path
      error => this.error = error // error path
    );
}

Конечно, это хорошая идея, чтобы дать пользователю некоторую обратную связь, когда доступ к данным не удается. Но отображение необработанного объекта ошибки, возвращаемого HttpClient, далеко не лучший способ сделать это.

Получение сведений об ошибке

Обнаружение того, что произошла ошибка, это одно. Интерпретация этой ошибки и составление удобного для пользователя ответа немного сложнее. Могут возникнуть два типа ошибок. Серверная часть сервера может отклонить запрос, вернув HTTP-ответ с кодом состояния, например 404 или 500. Это ответы об ошибках.

Или что-то может пойти не так на стороне клиента, например, сетевая ошибка, которая препятствует успешному завершению запроса, или исключение, выданное в операторе RxJS. Эти ошибки создают объекты JavaScript ErrorEvent.

HttpClient фиксирует оба вида ошибок в своем HttpErrorResponse, и вы можете проверить этот ответ, чтобы выяснить, что на самом деле произошло.

Проверка, интерпретация и устранение ошибок - это то, что вы хотите делать в сервисе, а не в компоненте.

Создание POST-запроса

Приложения часто отправляют данные на сервер. Они отправляют при отправке формы. В следующем примере служба HeroesService публикует сообщения о добавлении героя в базу данных.

/** POST: add a new hero to the database */
addHero (hero: Hero): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
    .pipe(
      catchError(this.handleError('addHero', hero))
    );
}

Метод HttpClient.post () похож на get () в том, что у него есть параметр типа (вы ожидаете, что сервер вернет нового героя) и он принимает URL ресурса.

Требуется еще два параметра:

• герой - данные для POST в теле запроса.
• httpOptions - параметры метода, которые в этом случае указывают требуемые заголовки.

Предыдущая: навигация по дереву компонентов с помощью DI
Далее: Анимация переходов и триггеров