Angular 2
Sujetos y observables angulares RXJS con solicitudes API
Buscar..
Observaciones
Hacer solicitudes de API con el servicio Angular 2 Http y RxJS es muy similar a trabajar con promesas en Angular 1.x.
Usa la clase Http para hacer peticiones. La clase Http expone los métodos para emitir solicitudes HTTP GET , POST , PUT , DELETE , PATCH , HEAD a través de los métodos correspondientes. También expone un método de request genérico para emitir cualquier tipo de solicitud HTTP.
Todos los métodos de la clase Http devuelven un Observable<Response> , al que puede aplicar operaciones RxJS . Se llama al método .subscribe() y se pasa una función a la que se llamará cuando se devuelvan datos en el flujo observable.
El flujo observable para una solicitud contiene solo un valor: la Response , y se completa / resuelve cuando la solicitud HTTP se completa con éxito, o errores / fallas si se produce un error.
Tenga en cuenta que los observables devueltos por el módulo Http son fríos , lo que significa que si se suscribe al observable varias veces, la solicitud de origen se ejecutará una vez por cada suscripción. Esto puede suceder si desea consumir el resultado en varios componentes de su aplicación. Para solicitudes GET, esto podría causar algunas solicitudes adicionales, pero esto puede crear resultados inesperados si se suscribe más de una vez a las solicitudes PUT o POST.
Solicitud basica
El siguiente ejemplo muestra una solicitud HTTP GET simple. http.get() devuelve un Observable que tiene el método subscribe . Este anexa los datos devueltos a la matriz de posts .
var posts = []
getPosts(http: Http):void {
this.http.get(`https://jsonplaceholder.typicode.com/posts`)
.map(response => response.json())
.subscribe(post => posts.push(post));
}
Encapsular las solicitudes de API
Puede ser una buena idea encapsular la lógica de manejo de HTTP en su propia clase. La siguiente clase expone un método para obtener publicaciones. Llama al método http.get() y llama a .map en el Observable devuelto para convertir el objeto Response en un objeto Post .
import {Injectable} from "@angular/core";
import {Http, Response} from "@angular/http";
@Injectable()
export class BlogApi {
constructor(private http: Http) {
}
getPost(id: number): Observable<Post> {
return this.http.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
.map((response: Response) => {
const srcData = response.json();
return new Post(srcData)
});
}
}
El ejemplo anterior utiliza una clase de Post para contener los datos devueltos, que podrían tener el siguiente aspecto:
export class Post {
userId: number;
id: number;
title: string;
body: string;
constructor(src: any) {
this.userId = src && src.userId;
this.id = src && src.id;
this.title = src && src.title;
this.body = src && src.body;
}
}
Un componente puede ahora utilizar el BlogApi clase para recuperar fácilmente Post de datos sin preocuparse de los trabajos de la Http clase.
Espera múltiples solicitudes
Un escenario común es esperar a que finalicen varias solicitudes antes de continuar. Esto se puede lograr utilizando el método forkJoin .
En el siguiente ejemplo, forkJoin se usa para llamar a dos métodos que devuelven Observables . La devolución de llamada especificada en el método .subscribe se llamará cuando ambos Observables se hayan completado. Los parámetros proporcionados por .subscribe coinciden con el orden dado en la llamada a .forkJoin . En este caso, primero posts luego tags .
loadData() : void {
Observable.forkJoin(
this.blogApi.getPosts(),
this.blogApi.getTags()
).subscribe((([posts, tags]: [Post[], Tag[]]) => {
this.posts = posts;
this.tags = tags;
}));
}
