Eine einfache Definition für Observable und Promise in Angular 4

Question

Ich möchte wirklich vollständig und einfach über Observable und Versprechen in Angular wissen. Danke, dass Sie mir ein einfaches Beispiel nennen.

Answer 1

Sie bei dieser Antwort aus @Gunter aussehen kann er es auf eine sehr einfache Art und Weise

https://stackoverflow.com/a/37365955/2708210

Gerade erklärt ein Beispielcode für die zwei

beobachtbare

getLukeSkywalkerObservable(){ 
    return this.http.get('http://swapi.co/api/people/1/') 
     .map(res => { 
     return res.json(); // using maps to filter data returned form the http call 
     }).map(data => { 
     return data; // using maps of maps to filter data returned form the map 
     }).flatMap((jedi) => this.http.get(jedi.homeworld)) 
     .map(res => { 
     return res.json().name; // using flat maps to combine data returned from two observables into one 
     }).catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
    } 

hinzufügen

Versprechen

getLukeSkywalkerPromise(){ 
    return this.http.get('http://swapi.co/api/people/1/').toPromise() 
     .then((data) => { 
     console.log(data); // binding the result from the promise 
     return data.json(); 
     }).then((data) => { 
     console.log(data.name); // more like map of map but limited functionality 
     return data.name; 
     }).catch((ex) => { 
      console.error('Server Error'+ex); 
     }) 
    } 

Answer 2

empfehlen durch die Winkel docs auf http hier link lesen Diese Antwort aus der Docs kommt.

Das angulare http.get gibt ein RxJS Observable zurück (Sie benötigen keine Observables für HTTP-Anfragen, da es 1 Anfrage und 1 Antwort ist) Ein Observable ist ein Stream von Ereignissen, den Sie mit Array-ähnlichen Operatoren verarbeiten können . Converting zu einem Versprechen ist oft eine gute Wahl. Normalerweise fragen Sie http.get(), um einen einzelnen Datenblock abzurufen. Wenn Sie die Daten erhalten, sind Sie fertig. Die aufrufende Komponente kann leicht ein einzelnes Ergebnis in Form eines Versprechens konsumieren.

Hier ist ein einfaches Beispiel: .../app/http.service.ts

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
@Injectable() 
export class HttpService { 

constructor(private _http: Http) { } 
retrieveTasks() { 
    return this._http.get('/tasks').map(data=>data.json()).toPromise() 
    } 
} 

Beachten Sie, dass die _http.get() 2 Funktionen es gekettet hat, .map und .toPromise(). Die .map Methode wird verwendet, um das zurückgegebene Objekt von der HTTP-Anforderung in ein JSON-formatiertes Objekt zu konvertieren, und die .toPromise-Methode wird verwendet, um den _http.get()-Aufruf zu erzwingen, uns ein Promise anstelle eines Observable zurückzugeben. Keine Notwendigkeit, die Observable Vorteile in grundlegenden HTTP-Anfragen zu verwenden, halten Sie es sauberer und einfacher mit Promises.