Explication détaillée d'Angular2Objet de programmation Observable dans

前言

RxJs提供的是核心的Observable对象，它是一个使用可观察数据序列实现组合异步和事件编程的。
与这个非常相似的异步编程模型是Promise，Promise是基于状态变化的异步模型，一旦从等待状态进入成功或失败状态便不能再次修改，当状态变化时订阅者只能获取到一个值；而Observable是基于序列的异步编程模型，随着序列的变化，订阅者可以持续不断地获取新的值。此外，Promise只提供回话机制，并没有更多的操作来支持对结果的复杂处理，而Observable提供了多种多样的操作符，用于处理运算结果，以满足复杂的应用逻辑。

在实际编程中，我们主要与三个对象打交道：Observable、observer、Subscription：

以一个元素的click事件为例看看如何使用Observable：

var clickStream = new Rx.Observable(observer => {
var handle = evt => observer.next(evt);
element.addEventListener('click', handle);
return () => element.removeEventListener('click', handle);
});
subscription = clickStream.subscribe(evt => {
console.log('onNext: ')} + evt.id);
}, err => {
console.error('onError');
}, () => {
console.log('onComplete');
});
setTimeout(() => {
subscription.unsubscribe();
}, 1000);

Si chaque événement nécessite un tel emballage, ce ne serait pas trop difficile, donc RxJs nous fournit une fonction pratique : Observable.fromEvent pour faciliter la liaison des événements.

Opérateurs de liaison courants :concat, merge, combineLates, etc.

Opérations de projection :map, flatMap, flatMap nécessite une présentation en détail

Filtrage :filter, distinctUltilChanges

Classification des opérateurs :Operators by Categories

Traitement des erreurs :catch, retry, finally

Réduction de pression :debounce, throttle, sample, pausable

Réduction :buffer, bufferWithCount, bufferWithTime

Pour maîtriser les opérateurs d'Observable, il faut d'abord apprendre à comprendre les diagrammes de séquence :

Les flèches représentent les séquences qui changent au fil du temps, par exemple, cliquer sur un élément à plusieurs reprises avec la souris, les cercles représentent l'impact de la séquence sur l'extérieur, comme chaque clic sur l'élément déclenchant un rappel d'événement, le nombre dans le cercle représentant l'information émise à l'extérieur, comme chaque déclenchement d'événement ayant un objet d'événement, représentant certaines informations de cette opération.

Pour utiliser de manière flexible Observable pour traiter des logiques complexes, il faut apprendre à utiliser les opérateurs qu'il fournit. Je divise les opérateurs en deux catégories, les opérations de séquence unique et les opérations de séquence composée. Les opérations de séquence unique sont les opérations de calcul appliquées à une séquence, et les opérations de séquence composée sont les opérateurs qui traitent deux ou plusieurs séquences. Les opérations de séquence composée sont relativement plus difficiles à comprendre.

Voyons d'abord l'opération de séquence unique, prenez map comme exemple :

L'opération map transforme l'information émise à chaque fois par une séquence, comme le montre l'image ci-dessus où map multiplie chaque valeur émise par dix, donc après que l'abonné s'abonne, la valeur abonnée reçue ne sera plus la valeur originale123plutôt que la séquence transformée10 20 30. Le diagramme de séquence permet de mieux comprendre les opérations d'Observable.

Nous allons examiner une opération de séquence composée, prenez merge comme exemple

Le but de l'opération merge est de fusionner deux séquences indépendantes en une seule séquence. La séquence originale1Avec le passage du temps, dans100ms émettra a, dans200ms émettra b300ms émettra c, le souscripteur émettra400ms recevra abc trois valeurs; la séquence2Dans15Émettra d à 0ms25Émettra e à 0ms35Émettra f à 0ms, le souscripteur émettra4Recevoir trois valeurs def dans 00ms. Après le merge, la nouvelle séquence de4Recevoir abcdef dans 00ms (attention à l'ordre).

Compréhension des opérateurs courants：

Observable.range：Série émettant une certaine quantité de valeurs

Observable.toArray: Convertir toutes les valeurs émises à la fin de la séquence en un tableau.

Observable.flatMap: Transformer les éléments de la séquence originale en une nouvelle séquence, et merger cette nouvelle séquence dans la position des éléments de la séquence originale.

Observable.startWith: Il va définir la première valeur de la séquence Observable

Observable.combineLatest: Similaire à promiseAll, exécute lorsque toutes les séries ont des résultats

Observable.scan: Faire une agrégation des valeurs émises à chaque fois dans la séquence, semblable à reduce, reduce agrégera toutes les valeurs de la séquence, émettra une valeur finale lorsque la séquence est terminée

Observable.sample: Prendre un certain échantillon à partir de la séquence continue

Observable.merge：Fusionner plusieurs séries en une, peut être utilisé pour OR

Observable.timestamp: Peut obtenir le temps de l'émission de chaque valeur émise

Observable.distinctUntilChanged(compare, selector): Selector extraire la clé utilisée pour la comparaison, compare utiliser pour comparer deux clés

Observable.takeWhile() Arrêter l'émission des données lorsque le paramètre est faux

Résumé

Voici tout le contenu de cet article, j'espère que le contenu de cet article pourra apporter un certain aide à votre apprentissage ou à votre travail, si vous avez des questions, vous pouvez laisser des commentaires pour échanger.