Какой из них использовать для создания имитации веб-службы для тестирования приложения Angular 4?
Разница между HttpModule и HttpClientModule
Ответы (5)
Используйте класс 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's руководство по перехватчикам и механике 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',
node_modules
и снова запустите npm install
- person Max Koretskyi; 27.07.2017
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
- person Tyler O; 08.08.2017
Не хочу повторяться, а просто резюмирую другим способом (функции, добавленные в новый HttpClient):
- Автоматическое преобразование из JSON в объект
- Определение типа ответа
- Событие стрельбы
- Упрощенный синтаксис заголовков
- Перехватчики
Я написал статью, в которой рассказал о разнице между старым «http» и новым «HttpClient». Цель заключалась в том, чтобы объяснить это как можно проще.
Просто о новом HttpClient в Angular
Это хороший справочник, он помог мне переключиться мои http
запросы к httpClient
.
Он сравнивает их с точки зрения различий и дает примеры кода.
Это всего лишь несколько отличий, с которыми я столкнулся при смене сервисов на 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, вам не нужно делать ничего лишнего.
Но если вам нужно проанализировать любой другой тип ответа, например текст или blob, убедитесь, что вы добавили responseType
в запрос. Вот так:
Выполнение HTTP-запроса GET с опцией 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);
});
Добавление перехватчика
Я также использовал перехватчики для добавления токена для моей авторизации к каждому запросу, ссылка.
вот так:
@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 => ...) в остальной части вашего кода.
Это связано с тем, что Observable ‹HttpResponse
‹T
>> привязан к HttpResponse.
Это плотно связывает слой http с остальной частью вашего кода.
Эта библиотека инкапсулирует часть .subscribe (x => ...) и предоставляет только данные и ошибки через ваши модели.
При использовании строго типизированных обратных вызовов вам нужно иметь дело только с вашими моделями в остальной части вашего кода.
Библиотека называется angular-extended-http-client.
библиотека angular-extended-http-client на GitHub a >
angular-extended-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.
Вы имеете дело только со своими моделями в этих строго типизированных обратных вызовах.
Следовательно, остальная часть вашего кода знает только о ваших моделях.
Кроме того, вы по-прежнему можете использовать традиционный маршрут и вернуть Observable ‹HttpResponse<
T>
> из Service API.
HttpClient - это новый API, входящий в состав 4.3, обновленный API с поддержкой событий выполнения, десериализации json по умолчанию, перехватчиков и многих других замечательных функций. Подробнее см. Здесь https://angular.io/guide/http em>
Http - это более старый API, который со временем будет считаться устаревшим.
Поскольку их использование очень похоже для основных задач, я бы посоветовал использовать HttpClient, поскольку это более современная и простая в использовании альтернатива.