Ich codiere eine API mit Angular2
Und NodeJS
, ich implementiere Dienste für meine ِ API, die eine Liste von Aufgaben abrufen und anzeigen sollen. Hier ist der Aufgabenservice:
import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class TaskService{
constructor(private http:Http){
console.log('Task Service Initialized...');
}
getTasks(){
return this.http.get('http://localhost:3000/api/tasks')
.map(res => res.json());
}
}
Für meine getTask
-Funktion (korrigiere mich, wenn ich falsch liege) nimmt die .map()
-Funktion meine Antwort und formatiert sie in einem Array von Werten. Hier sind nun die Aufgabenkomponenten, die den Aufgabendienst verwenden:
import { Component } from '@angular/core';
import {TaskService} from '../../services/task.service';
@Component({
moduleId: module.id,
selector: 'tasks',
templateUrl: 'tasks.component.html',
})
export class TasksComponent {
constructor(private taskService:TaskService){
this.taskService.getTasks()
.subscribe(tasks =>{
console.log(tasks);
})
}
}
Ich möchte verstehen, was diese .subscribe()
-Funktion bewirkt und finde keine relevanten Informationen.
Die Funktion .subscribe()
ähnelt den Methoden Promise.then()
, .catch()
und .finally()
in jQuery
, aber anstatt sich mit promise
s zu befassen, befasst es sich mit Observable
s.
Das bedeutet, dass es sich für die observable
von Interesse anmeldet (in Ihrem Fall getTasks()
) und wartet, bis es successful
ist, und dann die erste übergebene Rückruffunktion ausführt, die in deinem fall ist:
tasks => {
console.log(tasks);
}
Wenn Sie möchten, dass eine Logik bei einem Fehler (ähnlich wie .catch()
) oder bei einem vollständigen (ähnlich wie .finally()
) ausgeführt wird, können Sie diese Logik wie folgt an subscribe
übergeben:
observable.subscribe(
value => somethingToDoOnlyOnSuccess(value),
error => somethingToDoOnlyOnError(error),
() => somethingToDoAlways()
);
Weitere Beispiele und Details finden Sie hier