Різниця між HttpModule і HttpClientModule

Який із них використати для створення макетного веб-сервісу для тестування програми Angular 4?

Використовуйте HttpClientклас, HttpClientModuleякщо ви використовуєте Angular 4.3.x і вище:

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

@NgModule({
 imports: [
   BrowserModule,
   HttpClientModule
 ],
 ...

 class MyService() {
    constructor(http: HttpClient) {...}

Це оновлена версія httpвід @angular/httpмодуля з наступними поліпшеннями:

• Перехоплювачі дозволяють вставити в конвеєр логіку програмного забезпечення
• Незмінні об'єкти запиту / відповіді
• Події прогресу як для завантаження запиту, так і для завантаження відповіді

Про те, як це працює, ви можете прочитати в посібнику Insider щодо перехоплювачів та механіки HttpClient в Angular .

• Синхронний доступ до корпусу відповіді, включаючи підтримку типів корпусу JSON
• JSON - припущений дефолт, і його більше не потрібно чітко розбирати
• Підтвердження після запиту та тестова основа на основі тестування

Уперед старий клієнт http буде застарілим. Тут наведено посилання на повідомлення про вчинення та офіційні документи .

Також зверніть увагу, що старий http вводили за допомогою Httpмаркера класу замість нового HttpClient:

import { HttpModule } from '@angular/http';

@NgModule({
 imports: [
   BrowserModule,
   HttpModule
 ],
 ...

 class MyService() {
    constructor(http: Http) {...}

Крім того, HttpClientначебто, потрібні нові tslibпід час виконання, тому вам доведеться встановити його npm i tslibта оновити, system.config.jsякщо ви використовуєте SystemJS:

map: {
     ...
    'tslib': 'npm:tslib/tslib.js',

І якщо ви використовуєте SystemJS, вам потрібно додати ще одне відображення:

'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',

Не хочуть повторюватися, а просто підсумувати іншим способом (функції додані в новому HttpClient):

• Автоматичне перетворення з JSON в об'єкт
• Визначення типу відповіді
• Стрілянина події
• Спрощений синтаксис заголовків
• Перехоплювачі

Я написав статтю, де висвітлив різницю між старим "http" та новим "HttpClient". Метою було пояснити це найпростішим можливим способом.

Просто про новий HttpClient у Angular

Це хороша довідка, вона допомогла мені переключити мої запити http на httpClient

https://blog.hackages.io/angular-http-httpclient-same-but-different-86a50bbcc450

Він порівнює два з точки зору відмінностей і наводить приклади коду.

Це лише декілька відмінностей, з якими я мав справу під час зміни послуг на httpclient у своєму проекті (запозичення із статті, яку я згадав):

Імпорт

import {HttpModule} from '@angular/http';
import {HttpClientModule} from '@angular/common/http';

Запит і аналіз відповіді:

@ кутова / http

 this.http.get(url)
      // Extract the data in HTTP Response (parsing)
      .map((response: Response) => response.json() as GithubUser)
      .subscribe((data: GithubUser) => {
        // Display the result
        console.log('TJ user data', data);
      });

@ кутова / звичайна / http

 this.http.get(url)
      .subscribe((data: GithubUser) => {
        // Data extraction from the HTTP response is already done
        // Display the result
        console.log('TJ user data', data);
      });

Примітка: Вам більше не доведеться чітко витягувати повернуті дані; за замовчуванням, якщо отримані вами дані є типом JSON, вам не доведеться нічого зайвого робити.

Але якщо вам потрібно проаналізувати будь-який інший тип відповіді, наприклад, текст чи крапку, то переконайтеся, що ви додали responseTypeцей запит. Так:

Створення запиту GET HTTP з responseTypeможливістю:

 this.http.get(url, {responseType: 'blob'})
      .subscribe((data) => {
        // Data extraction from the HTTP response is already done
        // Display the result
        console.log('TJ user data', data);
      });

Додавання перехоплювача

Я також використовував перехоплювачі для додавання маркера для моєї авторизації до кожного запиту:

Це хороша довідка: https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/

так:

@Injectable()
export class MyFirstInterceptor implements HttpInterceptor {

    constructor(private currentUserService: CurrentUserService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        // get the token from a service
        const token: string = this.currentUserService.token;

        // add it if we have one
        if (token) {
            req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
        }

        // if this is a login-request the header is 
        // already set to x/www/formurl/encoded. 
        // so if we already have a content-type, do not 
        // set it, but if we don't have one, set it to 
        // default --> json
        if (!req.headers.has('Content-Type')) {
            req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
        }

        // setting the accept header
        req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
        return next.handle(req);
    }
}

Це досить приємне оновлення!

Існує бібліотека, яка дозволяє використовувати HttpClient із сильно набраними зворотними зворотами .

Дані та помилка доступні безпосередньо через ці зворотні виклики.

Коли ви використовуєте HttpClient з Observable, ви повинні використовувати .subscribe (x => ...) у решті коду.

Це тому, що спостережуване HttpResponse<< T>> пов'язане з HttpResponse .

Це щільна пара HTTP шар з іншою частиною коди .

Ця бібліотека інкапсулює частину .subscribe (x => ...) і викриває лише ваші дані та помилки через ваші Моделі.

З сильно набраними зворотними дзвінками, вам доведеться мати справу лише зі своїми Моделями в решті коду.

Бібліотека називається кутовим-розширеним-http-клієнтом .

кутова бібліотека http-client на GitHub

кутова бібліотека http-client на NPM

Дуже простий у використанні.

Використання зразка

Сильно набрані зворотні дзвінки є

Успіх:

• IObservable < T>
• IObservableHttpResponse
• IObservableHttpCustomResponse < T>

Збій:

• IObservableError < TError>
• IObservableHttpError
• IObservableHttpCustomError < TError>

Додайте пакет до свого проекту та у своєму модулі додатків

import { HttpClientExtModule } from 'angular-extended-http-client';

і в імпорті @NgModule

  imports: [
    .
    .
    .
    HttpClientExtModule
  ],

Ваші моделі

//Normal response returned by the API.
export class RacingResponse {
    result: RacingItem[];
}

//Custom exception thrown by the API.
export class APIException {
    className: string;
}

Ваша служба

У вашій службі ви просто створюєте парами з цими типами зворотного дзвінка.

Потім передайте їх методу get HttpClientExt .

import { Injectable, Inject } from '@angular/core'
import { RacingResponse, APIException } from '../models/models'
import { HttpClientExt, IObservable, IObservableError, ResponseType, ErrorType } from 'angular-extended-http-client';
.
.

@Injectable()
export class RacingService {

    //Inject HttpClientExt component.
    constructor(private client: HttpClientExt, @Inject(APP_CONFIG) private config: AppConfig) {

    }

    //Declare params of type IObservable<T> and IObservableError<TError>.
    //These are the success and failure callbacks.
    //The success callback will return the response objects returned by the underlying HttpClient call.
    //The failure callback will return the error objects returned by the underlying HttpClient call.
    getRaceInfo(success: IObservable<RacingResponse>, failure?: IObservableError<APIException>) {
        let url = this.config.apiEndpoint;

        this.client.get(url, ResponseType.IObservable, success, ErrorType.IObservableError, failure);
    }
}

Ваш компонент

У своєму компоненті ваша послуга вводиться та API getRaceInfo викликається, як показано нижче.

  ngOnInit() {    
    this.service.getRaceInfo(response => this.result = response.result,
                                error => this.errorMsg = error.className);

  }

Обидва, відповідь та помилка, повернуті у зворотному дзвінку, сильно набрані. Напр. відповідь типу RacingResponse, а помилка - APIException .

Ви маєте справу зі своїми Моделями лише в цих сильно набраних зворотах.

Отже, решта вашого коду знає лише про ваші Моделі.

Крім того, ви все ще можете використовувати традиційний маршрут і повертати спостережуване < HttpResponse<T >> з сервісного API.

HttpClient - це новий API, який поставляється з 4.3, він оновив API з підтримкою подій прогресу, деріаріалізацією json за замовчуванням, перехоплювачами та багатьма іншими чудовими можливостями. Детальніше дивіться тут https://angular.io/guide/http

Http - це старший API, і згодом буде застарілим.

Оскільки їх використання дуже схоже на основні завдання, я б радив використовувати HttpClient, оскільки це більш сучасна та проста у використанні альтернатива.