Préface
Le noyau de RXJS est l'objet observable, qui est une combinaison de programmation asynchrone et d'événements en utilisant des séquences de données observables.
Le modèle de programmation asynchrone qui est très similaire à ceci est prometteur. La promesse est un modèle asynchrone basé sur les changements d'état. Une fois que l'état d'attente entre dans un état réussi ou échoué, il ne peut plus être modifié. Lorsque l'État change, l'abonné ne peut obtenir qu'une seule valeur; Bien que l'observable soit un modèle de programmation asynchrone basé sur des séquences. À mesure que la séquence change, l'abonné peut obtenir en continu de nouvelles valeurs. De plus, Promise fournit uniquement un mécanisme de rappel et n'a pas plus d'opérations pour soutenir le traitement complexe des résultats. Observable fournit une variété d'opérateurs pour traiter les résultats de l'opération pour respecter la logique d'application complexe.
En programmation réelle, nous traitons principalement de trois objets: observable , observateur , abonnement :
Prenez l'événement de clic d'un élément comme exemple pour voir comment utiliser observable:
var clickstream = new rx.observable (Observer => {var handle = evt => Observer.next (evt); element.addeventListener ('click', handle); return () => element.reMoveEventListener ('click', manche);}); abonnement = clickstream. evt.id);}, err => {console.error ('onerror');}, () => {console.log ('onComplete');}); setTimeout (() => {abonnement.unSubScrib ();}, 1000); Ne serait-il pas trop gênant si chaque événement avait besoin d'être enveloppé comme ça? Par conséquent, RXJS nous offre une fonction pratique: Observable.fromEvent .
Opérateurs de liens communs: Concat, fusion, combinés, etc.
Opérations de projection: Carte, FlatMap, FlatMap doit être introduite
Filtre: Filtre, distincts.
Classification des opérateurs: opérateurs par catégories
Gestion des erreurs: attraper, réessayer, enfin
Décompression: Débouncement, gaz, échantillon, pauvreté
Réduire: tampon, tampon avec
Pour maîtriser les opérateurs d'observable, vous devez d'abord apprendre à comprendre le diagramme de séquence:
Les flèches représentent des séquences qui changent dans le temps. Par exemple, en cliquant sur la souris en continu sur un élément, et le cercle représente l'impact de la séquence à l'extérieur. Par exemple, chaque clic de l'élément déclenchera un rappel d'événements, et les numéros du cercle sont des informations émises de l'extérieur. Par exemple, chaque déclenchement de l'événement aura un objet d'événement, représentant certaines informations de cette opération.
Pour utiliser de manière flexible observable pour gérer la logique complexe, vous devez apprendre à utiliser les opérateurs qu'il fournit. J'ai divisé les opérateurs en deux catégories: opération à séquence à une seule séquence et opération de séquence composite. L'opération à séquence à une seule séquence fait référence aux opérations de fonctionnement effectuées sur une séquence. L'opération de séquence composée fait référence aux opérateurs qui traitent deux séquences ou plus. L'opération de séquence composée est relativement difficile à comprendre.
Examinons d'abord les opérations à séquence à une seule séquence, en prenant des opérations de carte comme exemple:
L'opération de carte consiste à convertir les informations transmises à l'extérieur dans une séquence à chaque fois. Comme le montre la figure ci-dessus, MAP multiplie la valeur de transmission de chaque fois par dix. Ensuite, lorsque l'abonné souscrit, la valeur d'abonnement obtenue à chaque fois n'est plus l'original 123 mais les diagrammes de séquence 10 20 30 convertis, vous pouvez plus facilement comprendre les opérations d'observable.
Prenons la fusion comme exemple
Le but de l'opération de fusion est de synthétiser deux séquences indépendantes en une seule séquence. À l'origine, au fil du temps, la séquence 1 transmet A à 100 ms, B à 200 ms et C à 300 ms, son abonné recevra trois valeurs d'ABC à 400 ms; La séquence 2 transmet D à 150 ms, E à 250 ms et F à 350 ms, et son abonné reçoit trois valeurs de DEF dans les 400 ms. La nouvelle séquence après Merge recevra ABCDEF dans les 400 ms (notez la commande).
Compréhension des opérateurs communs:
Observable.Range: transmet un certain nombre de séquences de valeurs.
Observable.toarray: convertit toutes les valeurs émises en un tableau lorsque la séquence est terminée.
Observable.flatmap: convertit les éléments du flux de séquence d'origine en un nouveau flux de séquence et fusionne ce nouveau flux de séquence à l'emplacement des éléments dans la séquence d'origine.
Observable.startWith: il définit la première valeur de la séquence observable
Observable.Combinelatest: Similaire à PromisEALL, il ne sera exécuté qu'après que toutes les séquences ont des résultats.
Observable.scan: les valeurs émises dans la séquence peuvent être agrégées. Semblable pour réduire, la réduction agrégera les valeurs de la séquence entière et envoie une valeur finale lorsque la séquence sera terminée.
Observable.Sample: Obtenez un certain échantillon d'une séquence continue
Observable.merge: fusionnez plusieurs séquences en une seule et peut être utilisée comme ou
Observable.timestamp: peut obtenir le temps de transmission de chaque valeur de transmission
Observable.Distinctulchanged (comparer, sélecteur): Selector élimine la clé utilisée pour la comparaison et la compare pour comparer deux clés
Observable.pake while () arrête de transmettre des données lorsque le paramètre est faux
Résumer
Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article sera d'une aide à l'étude ou au travail de chacun. Si vous avez des questions, vous pouvez laisser un message pour communiquer.