Pourquoi mon code RXJS ne prend-il pas effet lors du fonctionnement sur les flux?

Questions et solutions fréquemment posées pour une opération de streaming RXJS non valide

Lorsque vous utilisez RXJS pour traiter les flux de données, les développeurs rencontrent souvent des situations où les opérateurs ne peuvent pas fonctionner comme prévu. Cet article analysera un cas typique, expliquera la cause profonde du problème et fournira des solutions.

Problème: le fonctionnement même de la multiplication par deux échoue

Supposons que nous devons traiter un tableau de nombres, filtrer même les nombres et les multiplier par 2. Le code utilisant of opérateur, filter et l'opérateur map est le suivant:

 import {of} de 'rxjs';
import {map, filter} à partir de 'rxjs / opérateurs';

const Source $ = de ([1, 2, 3, 4, 5]);
Source $ .Pipe (
  filtre (élément => élément% 2 === 0),
  map (num => num * 2)
) .Subscribe (valeur => console.log (valeur));

Les sorties attendues sont 4 et 8 , mais le résultat réel n'a aucune sortie.

Analyse des causes

Le problème réside dans l'utilisation de of opérateur. of opérateur émet les paramètres d'entrée dans son ensemble, plutôt que de transmettre chaque élément dans le tableau séparément. Par conséquent, item reçu par filter et map est le tableau complet [1, 2, 3, 4, 5] , plutôt qu'un seul numéro dans le tableau. Le jugement de item % 2 === 0 n'est pas valide pour l'ensemble du tableau, ce qui fait filter à filtrer tout le contenu.

Solution: utilisez l'opérateur from

Pour résoudre ce problème, from l'opérateur doit être utilisé à la place de of opérateur. from opérateur divise le tableau en éléments individuels et l'émet dans le observable un par un. Le code modifié est le suivant:

 import {de} de 'rxjs';
import {map, filter} à partir de 'rxjs / opérateurs';

const Source $ = de ([1, 2, 3, 4, 5]);
Source $ .Pipe (
  filtre (élément => élément% 2 === 0),
  map (num => num * 2)
) .Subscribe (valeur => console.log (valeur));

Maintenant, filter et map géreront correctement chaque numéro, avec les sorties finales 4 et 8 . Cela démontre l'importance de choisir l'opérateur RXJS correct pour le traitement correct des flux de données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!