Войти Зарегистрироваться
Войти Зарегистрироваться
31.12.2017 в 04:09 Блог

Введение в Angular HttpClient

Angular 4.3 дает нам новый более простой способ обработки HTTP запросов с библиотекой HttpClient. Он доступен под новым именем, чтобы избежать внесения изменений в текущую библиотеку Http. HttpClient также предоставляет нам расширенные функции, такие как возможность прослушивания событий прогресса и перехватчиков для мониторинга или изменения запросов или ответов.

Устновка

Во первых, вам нужно будет импортировать HttpClientModule  из @angular/common/http в ваше приложение:

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

И тогда вы сможете использовать HttpClient. 

import { Injectable } from '@angular/core';

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

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

  // ...
}

Базовое использование

Выполнение базовых запросов GET, POST, PUT, PATCH или DELETE очень похоже на то, с чем вы привыкли использовать в старом API Http. Одно из главных отличий заключается в том, что по умолчанию ожидается ответ в формате JSON, поэтому нет необходимости явно анализировать ответ JSON.

Вот пример запроса GET:

// ...

constructor(private http: HttpClient) {}

getData() {
  this.http.get(this.url).subscribe(res => {
    this.posts = res;
  });
}

Eсли вы ожидаете не JSON в качестве ответа, вы можете указать ожидаемый тип ответа, используя объект с ключом responseType:

getData() {
  this.http.get(this.url, { responseType: 'text' }).subscribe(res => {
    this.data = res;
  });
}

Вы также можете определить интерфейс для формы ответа и проверки типа с этим интерфейсом:

interface Post {
  title: string;
  body: string;
};

// ...

constructor(private http: HttpClient) {}

getData() {
  this.http.get<Post>(this.url).subscribe(res => {
    this.postTitle = res.title;
  });
}

По умолчанию HttpClient возвращает тело ответа. Вы можете передать объект с ключом observe, установленным на значение «response», чтобы получить полный ответ. Это может быть полезно для проверки определенных заголовков:

getData() {
  this.http.get<Post>(this.url, { observe: 'response' }).subscribe(res => {
    this.powered = res.headers.get('X-Powered-By');
    this.postTitle = res.body.title;
  });
}

Post, put и patch запросы

Выполнение запроса POST, PUT или PATCH так же просто:

postData() {
  this.http.post(this.url, this.payload).subscribe();
}

Обратите внимание, что нам еще нужно вызвать метод subscribe, чтобы запрос был сделан. Без вызова subscribe запрос не отправляется. Вероятно, вы захотите обработать и ошибку:

postData() {
  this.http.post(this.url, this.payload).subscribe(
    res => {
      console.log(res);
    },
    (err: HttpErrorResponse) => {
      console.log(err.error);
      console.log(err.name);
      console.log(err.message);
      console.log(err.status);
    }
  );
}

Ошибка запроса имеет тип HttpErrorResponse и содержит, среди прочего, имя ошибки, сообщение об ошибке и состояние сервера.

Дополнительные параметры для заголовков передаваемых сообщений или параметров запроса также могут быть добавлены к запросу POST, PUT или PATCH с использованием заголовков или ключей params в переданном объекте в качестве третьего аргумента:

updatePost() {
  this.http
    .put(this.url, this.payload, {
      params: new HttpParams().set('id', '56784'),
      headers: new HttpHeaders().set('Authorization', 'some-token')
    })
    .subscribe(...);
}

Обратите внимание на использование классов HttpParams и HttpHeaders. Их нужно будет импортировать их из @angle/common/http.

События статуса загрузки

Отличная новая функция с HttpClient - возможность слушать события прогресса. Это можно сделать по любому типу запроса, и в течение жизненного цикла события запроса будет доступна различная информация. Вот полный пример с запросом GET:

import { Injectable } from '@angular/core';
import {
  HttpClient,
  HttpRequest,
  HttpEvent,
  HttpEventType
} from '@angular/common/http';

@Injectable()
export class DataService {
  url = '/some/api';

  constructor(private http: HttpClient) {}

  getData() {
    const req = new HttpRequest('GET', this.url, {
      reportProgress: true
    });

    this.http.request(req).subscribe((event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.Sent:
          console.log('Request sent!');
          break;
        case HttpEventType.ResponseHeader:
          console.log('Response header received!');
          break;
        case HttpEventType.DownloadProgress:
          const kbLoaded = Math.round(event.loaded / 1024);
          console.log(`Download in progress! ${ kbLoaded }Kb loaded`);
          break;
        case HttpEventType.Response:
          console.log('Done!', event.body);
      }
    });
  }
}
  • Сначала нам нужно создать объект запроса, создав экземпляр класса HttpRequest и используя параметр reportProgress.
  • Затем мы подписываемся на наш объект запроса, чтобы инициировать запрос и прослушивать разные типы событий в течение срока действия запроса. Мы можем реагировать соответствующим образом в зависимости от типа события. Доступные типы событий: Sent, UploadProgress, ResponseHeader, DownloadProgress, Response и User.
  • В приведенном выше примере мы получаем объем данных, загружаемых до сих пор из ответа GET, а в случае чего-то вроде запроса POST или PUT мы также можем получить процент загружаемой полезной нагрузки, используя что-то вроде 100 * event.loaded / event.total. Это позволяет легко показать индикатор выполнения пользователю.

В этом посте были рассмотрены основы модуля HttpClient и работу с его событиями. Вы также можете перейти к официальной документации для более углубленного изучения.

Автор Дмитрий Цирульников
Коментарии (0)
Для того что-бы оставить комментарий, авторизуйтесь