web-dev-qa-db-fra.com

Pourquoi utiliser la fonction RxJs de ()?

dans la section service du tutoriel angular.io pour angular2, j'ai frappé une méthode nommée of.par exemple:

getHeroes(): Observable<Hero[]> {
  return of(HEROES);
}

ou dans l'échantillon ci-dessous:

getHero(id: number): Observable<Hero> {
  // Todo: send the message _after_ fetching the hero
  this.messageService.add(`HeroService: fetched hero id=${id}`);
  return of(HEROES.find(hero => hero.id === id));
}

dans angular.io Just expliqué

utilisé RxJS de () pour renvoyer un observable de faux héros (observable).

et Il n'a pas été expliqué pourquoi nous devrions utiliser la fonction et exactement ce qu'elle fait et quels sont ses avantages?

javascriptangularservicerxjsangular2-services
20
Aref Zamani

La raison pour laquelle ils utilisent of() est qu'il est très facile de l'utiliser au lieu d'un véritable appel HTTP.

Dans une application réelle, vous implémenteriez getHeroes() comme ceci par exemple:

getHeroes(): Observable<Hero[]> {
  return this.http.get(`/heroes`);
}

Mais comme vous voulez simplement utiliser une réponse simulée sans créer de véritable backend, vous pouvez utiliser of() pour renvoyer une fausse réponse:

const HEROES = [{...}, {...}];

getHeroes(): Observable<Hero[]> {
  return of(HEROES);
}

Le reste de votre application fonctionnera de la même manière car of() est un observable et vous pourrez ensuite vous y abonner ou chaîner des opérateurs comme vous utilisiez this.http.get(...).

La seule chose que of() fait, c'est qu'il émet ses paramètres sous forme d'émissions uniques immédiatement lors de la souscription, puis envoie la notification complete.

34
martin

Observable.of () est utile pour maintenir le type de données Observable avant d'implémenter une interaction asynchrone (par exemple, une requête http à une API).

Comme Brandon Miller le suggère, Observable.of () renvoie un Observable qui émet immédiatement toutes les valeurs fournies à of () en tant que paramètres, puis se termine.

C'est mieux que de renvoyer des valeurs statiques, car cela vous permet d'écrire des abonnés qui peuvent gérer le type Observable (qui fonctionne à la fois de manière synchrone et asynchrone), avant même d'implémenter votre processus asynchrone.

//this function works synchronously AND asynchronously
getHeroes(): Observable<Hero[]> { 
  return Observable.of(HEROES)
  //-OR-
  return this.http.get('my.api.com/heroes')
  .map(res => res.json());
}

//it can be subscribed to in both cases
getHeroes().subscribe(heroes => {
  console.log(heroes); // '[hero1,hero2,hero3...]'
}

//DON'T DO THIS
getHeroesBad(): Array<Hero> {
  return HEROES                             //Works synchronously
  //-OR-
  return this.http.get('my.api.com/heroes') //TypeError, requires refactor
}
6
zhark

Dans le premier exemple, je suppose que la variable HEROES est un tableau d'objets, dans lequel chaque objet correspond à l'interface Hero (ou est l'instance de la classe Hero). Lorsque nous appelons cette fonction quelque part dans le code, elle agira comme ceci:

heroService.getHeroes()
  .subscribe((heroes: Hero[]) => {
    console.log(heroes) 
    // will output array of heroes: [{...}, {...}, ...]
  })

Cela signifie que lorsque nous utilisons la méthode de création de Observableof avec un tableau comme argument, lors de la souscription, elle émettra le tableau entier, pas ses 'éléments un par un.

Dans le deuxième exemple, lorsque nous nous abonnons à Observable, qui a été renvoyée par la méthode getHero(), elle n'émet qu'un seul héros, dont l'id correspond à l'id donné.

Fondamentalement, lorsque vous créez Observable avec la méthode of et lui fournissez des arguments, lors de la souscription, il émet ces arguments un par un.

Voici une bonne référence

0
vanelizarov