http - angular2 - return observable angular 4

Angular2: convierte la matriz a Observable

Question

Tengo un componente que obtiene los datos de un servicio a través de http, el problema es que no quiero llegar al backend de la API cada vez que muestro este componente. Quiero que mi servicio verifique si los datos están en la memoria, si es así, devuelve un observable con la matriz en la memoria y, si no, realiza la solicitud http.

Mi componente

import {Component, OnInit } from ''angular2/core'';
import {Router} from ''angular2/router'';
import {Contact} from ''./contact'';
import {ContactService} from ''./contact.service'';
@Component({
selector: ''contacts'',
templateUrl: ''app/contacts/contacts.component.html''
})
export class ContactsComponent implements OnInit {
contacts: Contact[];
errorMessage: string;
constructor(
private router: Router,
private contactService: ContactService) { }
ngOnInit() {
this.getContacts();
}
getContacts() {
this.contactService.getContacts()
.subscribe(
contacts => this.contacts = contacts,
error => this.errorMessage = <any>error
);
}
}

Mi servicio

import {Injectable} from ''angular2/core'';
import {Http, Response, Headers, RequestOptions} from ''angular2/http'';
import {Contact} from ''./contact'';
import {Observable} from ''rxjs/Observable'';
@Injectable()
export class ContactService {
private contacts: Array<Contact> = null;
constructor (private http: Http) {
}
getContacts() {
// Check first if contacts == null
// if not, return Observable(this.contacts)? <-- How to?
return this.http.get(url)
.map(res => <Contact[]> res.json())
.do(contacts => {
this.contacts = contacts;
console.log(contacts);
}) // eyeball results in the console
.catch(this.handleError);
}
private handleError (error: Response) {
// in a real world app, we may send the server to some remote logging infrastructure
// instead of just logging it to the console
console.error(error);
return Observable.throw(error.json().error || ''Server error'');
}
}

Answer 1

Algunas personas como yo lo quieren de manera diferente, que es desde la string[] a Observable<string> .

Este es un ejemplo que implica la conversión:

import { from } from ''rxjs/observable/from'';
import ''rxjs/add/operator/map'';
import ''rxjs/add/operator/toArray'';
const ids = [''x12'', ''y81''];
let userUrls: string[];
from(ids) // Converting string[] into Observable<string>
.map(id => ''http://localhost:8080/users/'' + id)
.toArray()
.subscribe(urls => userUrls = urls);

Esperemos que ayude a otros.

Answer 2

En angular7 es suficiente para poner el of() . Lo que ponga dentro of() se cambiará a observable. Aquí, this.contacts se convierte en observable.

import { of } from ''rxjs'';
getContacts() {
if(this.contacts != null)
{
return of(this.contacts);
}
}

Answer 3

Estás ahí. Si ya tiene los datos en la memoria, puede usar observables (equivalente a return/just en RxJS 4).

getContacts() {
if(this.contacts != null)
{
return Observable.of(this.contacts);
}
else
{
return this.http.get(url)
.map(res => <Contact[]> res.json())
.do(contacts => this.contacts = contacts)
.catch(this.handleError);
}
}

Answer 4

Esto podría llegar muy tarde, pero he estado usando sessionStorage bastante para manejar parte de mi trabajo. Si pierde el estado porque la gente estaba rebotando, todavía tiene sus datos.

 getSubjects(): Observable<Subject[]> {
let SubjectsString = sessionStorage.getItem("Subjects")
if (SubjectsString) {
let subjects: Subject[] = JSON.parse(SubjectsString);
console.log("GETTING DATA FROM SESSION STORAGE")
return Observable.of(subjects);
} else {
let url = `${this.apiHost}/api/subject`;
return this.http.get(url)
.map(res =>{
sessionStorage.setItem("Subjects",JSON.stringify(res.json()));
return res.json();
})
}
}

En este ejemplo, tengo una clase para Asunto y una definición para apiHost, pero el resto es bastante simple. Llamas al servicio para un observable. Su componente no tiene idea de dónde están los datos y no le importa. El servicio verifica el almacenamiento local y, si lo tiene, lo convierte en un observable y lo devuelve, si no lo hace, va y lo obtiene, luego lo guarda en el almacenamiento local y luego lo devuelve.

En mi caso, tengo algunas aplicaciones enormes con cientos de páginas. Los usuarios pueden pasar de una bonita página nueva de Angular4 a una era ASP clásica y volver varias veces. Tener todos los elementos del menú e incluso los resultados de búsqueda en el almacenamiento de sesiones ha sido un salvavidas.

Answer 5

Solución rápida aquí:

getSomething():Observable<Object[]>{
return new Observable(observable => {
this.http.get(''example.com'').subscribe(results => {
observable.next(results.json());
observable.complete();
});
});
}

Answer 6

También puede usar Observable.of(resultArray);

de la import { Observable } from ''rxjs;'' paquete

Answer 7

import { of } from ''rxjs'';
return of(this.contacts);