Lequel utiliser pour créer un faux service Web pour tester l'application Angular 4?
Lequel utiliser pour créer un faux service Web pour tester l'application Angular 4?
Réponses:
Utilisez la HttpClient
classe de HttpClientModule
si vous utilisez Angular 4.3.x et supérieur:
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
HttpClientModule
],
...
class MyService() {
constructor(http: HttpClient) {...}
Il s'agit d'une version mise à niveau http
du @angular/http
module avec les améliorations suivantes:
- Les intercepteurs permettent d'insérer la logique du middleware dans le pipeline
- Objets de demande / réponse immuables
- Événements de progression pour le téléchargement des demandes et le téléchargement des réponses
Vous pouvez lire comment cela fonctionne dans le guide d'Insider sur les intercepteurs et la mécanique HttpClient dans Angular .
- Accès au corps de réponse synchrone typé, y compris la prise en charge des types de corps JSON
- JSON est une valeur par défaut supposée et n'a plus besoin d'être explicitement analysée
- Vérification post-demande et cadre de test basé sur le rinçage
À l'avenir, l'ancien client http sera obsolète. Voici les liens vers le message de validation et les documents officiels .
Faites également attention à ce que l'ancien http ait été injecté à l'aide du Http
jeton de classe au lieu du nouveau HttpClient
:
import { HttpModule } from '@angular/http';
@NgModule({
imports: [
BrowserModule,
HttpModule
],
...
class MyService() {
constructor(http: Http) {...}
De plus, les nouvelles HttpClient
semblent nécessiter tslib
en runtime, vous devez donc l'installer npm i tslib
et mettre à jour system.config.js
si vous utilisez SystemJS
:
map: {
...
'tslib': 'npm:tslib/tslib.js',
Et vous devez ajouter un autre mappage si vous utilisez SystemJS:
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
node_modules
dossier et exécuter à npm install
nouveau
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
Je ne veux pas être répétitif, mais simplement pour résumer d'une autre manière (fonctionnalités ajoutées dans le nouveau HttpClient):
J'ai écrit un article, où j'ai couvert la différence entre l'ancien "http" et le nouveau "HttpClient". Le but était de l'expliquer de la manière la plus simple possible.
Ceci est une bonne référence, cela m'a aidé à basculer mes demandes http vers httpClient
https://blog.hackages.io/angular-http-httpclient-same-but-different-86a50bbcc450
Il compare les deux en termes de différences et donne des exemples de code.
Ce ne sont que quelques différences que j'ai traitées en changeant les services en httpclient dans mon projet (emprunt à l'article que j'ai mentionné):
import {HttpModule} from '@angular/http';
import {HttpClientModule} from '@angular/common/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);
});
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);
});
Remarque: vous n'avez plus à extraire explicitement les données renvoyées; par défaut, si les données que vous récupérez sont de type JSON, vous n'avez rien d'autre à faire.
Mais, si vous devez analyser tout autre type de réponse comme du texte ou un blob, assurez-vous d'ajouter le responseType
dans la demande. Ainsi:
responseType
option: 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);
});
J'ai également utilisé des intercepteurs pour ajouter le jeton de mon autorisation à chaque demande:
Ceci est une bonne référence: https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/
ainsi:
@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);
}
}
C'est une très belle mise à niveau!
Il existe une bibliothèque qui vous permet d' utiliser HttpClient avec des rappels fortement typés .
Les données et l'erreur sont disponibles directement via ces rappels.
Lorsque vous utilisez HttpClient avec Observable, vous devez utiliser .subscribe (x => ...) dans le reste de votre code.
En effet , Observable < HttpResponse
< T
>> est liée à HttpResponse .
Cela couple étroitement la couche http avec le reste de votre code .
Cette bibliothèque encapsule la partie .subscribe (x => ...) et expose uniquement les données et les erreurs via vos modèles.
Avec des rappels fortement typés, vous n'avez à gérer vos modèles que dans le reste de votre code.
La bibliothèque s'appelle angular-extended-http-client .
bibliothèque client angulaire-étendue-http sur GitHub
bibliothèque client angulaire-étendue-http sur NPM
Très simple d'utilisation.
Les rappels fortement typés sont
Succès:
T
>T
>Échec:
TError
>TError
>import { HttpClientExtModule } from 'angular-extended-http-client';
et dans les importations @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;
}
Dans votre service, vous créez simplement des paramètres avec ces types de rappel.
Ensuite, transmettez-les à la méthode get de 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);
}
}
Dans votre composant, votre service est injecté et l' API getRaceInfo appelée comme indiqué ci-dessous.
ngOnInit() {
this.service.getRaceInfo(response => this.result = response.result,
error => this.errorMsg = error.className);
}
La réponse et l' erreur renvoyées dans les rappels sont fortement typées. Par exemple. la réponse est de type RacingResponse et l' erreur est APIException .
Vous ne traitez vos modèles que dans ces rappels fortement typés.
Par conséquent, le reste de votre code ne connaît que vos modèles.
En outre, vous pouvez toujours utiliser la route traditionnelle et renvoyer Observable < HttpResponse<
T >
> à partir de l'API de service.
HttpClient est une nouvelle API fournie avec 4.3, elle a mis à jour les API avec la prise en charge des événements de progression, la désérialisation json par défaut, les intercepteurs et de nombreuses autres fonctionnalités intéressantes. Voir plus ici https://angular.io/guide/http
Http est l'ancienne API et sera finalement obsolète.
Étant donné que leur utilisation est très similaire pour les tâches de base, je conseillerais d'utiliser HttpClient car c'est l'alternative la plus moderne et la plus facile à utiliser.