web-dev-qa-db-fra.com

Que fait la fonction .subscribe ()?

Je code une API avec Angular2 Et NodeJS, je suis en train d'implémenter des services pour mon API qui est supposée obtenir une liste de tâches et l'afficher. Voici le service de tâches:

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());
  }
}

Pour ma fonction getTask (corrigez-moi si je me trompe), la fonction .map() prend ma réponse et la formate dans un tableau de valeurs. Voici maintenant les composants de tâches qui utilisent le service de tâches:

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);
    })
  }
}

Je voudrais comprendre ce que cette fonction .subscribe() fait et je ne trouve aucune information pertinente.

16
Aria Groult

La fonction .subscribe() est similaire à la méthode Promise.then(), .catch() et .finally() dans jQuery, mais au lieu de traiter avec promises, il traite avec Observable s.

Cela signifie qu'il va s'inscrire lui-même à la observable d'intérêt (qui est getTasks() dans votre cas) et attendre qu'il soit successful, puis exécuter la première fonction de rappel transmise qui dans votre cas c'est:

tasks => {
    console.log(tasks);
} 

Si vous voulez qu'il exécute une logique sur erreur (similaire à .catch()) ou sur complète (similaire à.finally()), vous pouvez transmettre cette logique à subscribe comme suit:

observable.subscribe(
  value => somethingToDoOnlyOnSuccess(value),
  error => somethingToDoOnlyOnError(error),
  () => somethingToDoAlways()
);

Plus d'exemples et de détails peuvent être trouvés ici

23