¿Cuál usar para crear un servicio web simulado para probar la aplicación Angular 4?
¿Cuál usar para crear un servicio web simulado para probar la aplicación Angular 4?
Respuestas:
Use la HttpClient
clase from HttpClientModule
si está usando Angular 4.3.xy superior:
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
HttpClientModule
],
...
class MyService() {
constructor(http: HttpClient) {...}
Es una versión mejorada http
del @angular/http
módulo con las siguientes mejoras:
- Los interceptores permiten que la lógica de middleware se inserte en la tubería
- Solicitud inmutable / objetos de respuesta
- Eventos de progreso para la carga de solicitudes y la descarga de respuestas
Puede leer cómo funciona en la guía de Insider sobre interceptores y la mecánica de HttpClient en Angular .
- Acceso de cuerpo de respuesta síncrona mecanografiada, que incluye soporte para tipos de cuerpo JSON
- JSON es un valor predeterminado asumido y ya no necesita ser analizado explícitamente
- Verificación posterior a la solicitud y marco de prueba basado en vaciado
En adelante, el antiguo cliente http quedará en desuso. Aquí están los enlaces al mensaje de confirmación y los documentos oficiales .
También preste atención a que se inyectó http antiguo utilizando el Http
token de clase en lugar del nuevo HttpClient
:
import { HttpModule } from '@angular/http';
@NgModule({
imports: [
BrowserModule,
HttpModule
],
...
class MyService() {
constructor(http: Http) {...}
Además, las nuevas HttpClient
parecen requerirse tslib
en tiempo de ejecución, por lo que debe instalarlo npm i tslib
y actualizarlo system.config.js
si está usando SystemJS
:
map: {
...
'tslib': 'npm:tslib/tslib.js',
Y necesita agregar otra asignación si usa SystemJS:
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
node_modules
carpeta y ejecutar de npm install
nuevo
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
No quiero ser repetitivo, pero solo para resumir de otra manera (características agregadas en el nuevo HttpClient):
Escribí un artículo, donde cubrí la diferencia entre el antiguo "http" y el nuevo "HttpClient". El objetivo era explicarlo de la manera más fácil posible.
Esta es una buena referencia, me ayudó a cambiar mis solicitudes http a httpClient
https://blog.hackages.io/angular-http-httpclient-same-but-different-86a50bbcc450
Compara los dos en términos de diferencias y da ejemplos de código.
Estas son solo algunas diferencias con las que traté mientras cambiaba los servicios a httpclient en mi proyecto (tomando prestado del artículo que mencioné):
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);
});
Nota: ya no tiene que extraer los datos devueltos explícitamente; de forma predeterminada, si los datos que obtiene son de tipo JSON, entonces no tiene que hacer nada adicional.
Pero, si necesita analizar cualquier otro tipo de respuesta como texto o blob, asegúrese de agregar el responseType
en la solicitud. Al igual que:
responseType
opción: 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);
});
También utilicé interceptores para agregar el token para mi autorización a cada solicitud:
Esta es una buena referencia: https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/
al igual que:
@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);
}
}
Es una muy buena actualización!
Hay una biblioteca que le permite usar HttpClient con devoluciones de llamada fuertemente tipadas .
Los datos y el error están disponibles directamente a través de estas devoluciones de llamada.
Cuando usa HttpClient con Observable, debe usar .subscribe (x => ...) en el resto de su código.
Esto se debe a observable < HttpResponse
< T
>> está ligado a HttpResponse .
Esta combina estrechamente la capa http con el resto de su código .
Esta biblioteca encapsula la parte .subscribe (x => ...) y expone solo los datos y el error a través de sus Modelos.
Con devoluciones de llamada fuertemente tipadas, solo tiene que lidiar con sus Modelos en el resto de su código.
La biblioteca se llama angular-extended-http-client .
biblioteca angular-extended-http-client en GitHub
biblioteca angular-extended-http-client en NPM
Muy facil de usar.
Las devoluciones de llamada fuertemente tipadas son
Éxito:
T
>T
>Fracaso:
TError
>TError
>import { HttpClientExtModule } from 'angular-extended-http-client';
y en las importaciones @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;
}
En su Servicio, solo crea parámetros con estos tipos de devolución de llamada.
Luego, páselos al método 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);
}
}
En su Componente, se inyecta su Servicio y se llama a la API getRaceInfo como se muestra a continuación.
ngOnInit() {
this.service.getRaceInfo(response => this.result = response.result,
error => this.errorMsg = error.className);
}
Tanto la respuesta como el error devuelto en las devoluciones de llamada están fuertemente tipados. P.ej. la respuesta es tipo RacingResponse y el error es APIException .
Solo trata con sus modelos en estas devoluciones de llamada fuertemente tipadas.
Por lo tanto, el resto de su código solo conoce sus Modelos.
Además, aún puede usar la ruta tradicional y devolver Observable < HttpResponse<
T >
> desde la API de servicio.
HttpClient es una nueva API que viene con 4.3, ha actualizado las API con soporte para eventos de progreso, deserialización json por defecto, interceptores y muchas otras características excelentes. Ver más aquí https://angular.io/guide/http
Http es la API más antigua y eventualmente quedará en desuso.
Dado que su uso es muy similar para tareas básicas, recomendaría usar HttpClient ya que es la alternativa más moderna y fácil de usar.