Creation Function

Dans RxJS, il existe deux formes différentes de Fonctions de Création pour créer des Observable et de Pipeable Operators pour convertir des Observable existants.

Cette page décrit les concepts de base des Creation Function et les sept catégories principales.

Qu'est-ce que les Creation Function ?

**Les fonctions de création sont des fonctions permettant de créer de nouveaux Observable.

import { of, from, interval } from 'rxjs';

// Creation FunctionUtilisé comme
const obs1$ = of(1, 2, 3);
const obs2$ = from([4, 5, 6]);
const obs3$ = interval(1000);

Elles sont importées directement du paquetage rxjs et appelées en tant que fonctions pour créer un Observable.

Différences avec Pipeable Operator

Les Creation Function et les Pipeable Operator ont des utilisations et des usages différents. Voir le tableau ci-dessous pour voir les différences entre eux.

Caractéristiques	Creation Function	Pipeable Operator
Utilisation.	Création d'un nouvel Observable	Conversion d'un Observable existant
Importer.	rxjs.	rxjs/operators.
**Comment l'utiliser ?	Appeler directement en tant que fonction	Utilisation dans .pipe().
Exemple.	concat(obs1$, obs2$)	obs1$.pipe(concatWith(obs2$))

Exemple de Creation Function

La Creation Function est utilisée pour combiner directement plusieurs Observable.

import { concat, of } from 'rxjs';

const obs1$ = of(1, 2, 3);
const obs2$ = of(4, 5, 6);

// Creation Function Utilisé comme
concat(obs1$, obs2$).subscribe(console.log);
// Sortie de l'usine: 1, 2, 3, 4, 5, 6

Exemple de Pipeable Operator.

Le Pipeable Operator est utilisé pour ajouter un processus de conversion à un Observable existant.

import { of } from 'rxjs';
import { concatWith } from 'rxjs';

const obs1$ = of(1, 2, 3);
const obs2$ = of(4, 5, 6);

// Pipeable Operator Utilisé comme
obs1$.pipe(
  concatWith(obs2$)
).subscribe(console.log);
// Sortie de l'usine: 1, 2, 3, 4, 5, 6

Critères d'utilisation.

Le choix entre Creation Function et Pipeable Operator est déterminé par les critères suivants

Quand la Creation Function doit être utilisée.

La Creation Function convient lorsque vous souhaitez exploiter plusieurs Observable au même niveau ou lorsque vous souhaitez créer un Observable à partir de zéro.

• Lorsque vous combinez plusieurs Observable au même niveau**.

  concat(obs1$, obs2$, obs3$)
  merge(click$, hover$, scroll$)

• Depuis le débutObservableQuand créer

  of(1, 2, 3)
  from([1, 2, 3])
  interval(1000)

Pipeable Operator Si vous devez utiliser

Pipeable Operatorest approprié lorsque vous souhaitez ajouter un processus à un processus existant ou lorsque vous souhaitez enchaîner plusieurs opérations.Observableexistant ou lorsque vous souhaitez enchaîner plusieurs opérations.

• Si vous souhaitez ajouter un processus à un processus existantObservableLorsque vous souhaitez ajouter un processus à un processus existant

  obs1$.pipe(
    map(x => x * 2),
    concatWith(obs2$),
    filter(x => x > 5)
  )

• Lorsque vous enchaînez plusieurs opérations en tant que pipeline

Creation Functions Catégories de

Dans ce chapitre,Creation Functionsaux7Vous apprendrez à les diviser en trois catégories.

Liste de toutes les catégories

Le tableau ci-dessous présente toutes les catégories et les fonctions qu'elles contiennent. Cliquez sur le nom de chaque fonction pour accéder à la page détaillée.

Catégorie	Description de la fonction	Fonctions principales	Cas d'utilisation typiques
Système de création de base	Fonctions les plus élémentaires et les plus fréquemment utilisées. Données, tableaux, événements et tempsObservableCréation de	of, from, fromEvent, interval, timer	Test de valeur fixe, flux de données existantes,DOMle traitement des événements, l'interrogation et l'exécution différée.
Systèmes de génération de boucles	forSystèmes de génération de boucles tels que les instructions et le traitement des boucles.whileTraitement de boucle tel queObservableExpression sous la forme d'un	range, generate	Génération de nombres séquentiels, traitement par lots, transitions d'état complexes, calculs mathématiques
HTTPSystèmes de communication	HTTPLa communication est traitée commeObservableTraitée comme	ajax, fromFetch	XMLHttpRequestbasée surHTTPla communication,Fetch APIbasée surHTTPla communication,REST APIAppel
Système couplé	Un système dans lequel plusieursObservableaux1sont liés à un seul. Le moment et l'ordre de publication dépendent de la méthode de couplage.	concat, merge, combineLatest, zip, forkJoin	Traitement étape par étape, intégration d'événements multiples, synchronisation des entrées de formulaires, traitement parallèle, etc.APIAttente de l'achèvement d'un appel
Systèmes de sélection et de division	Un système dans lequel plusieursObservableA partir de.1Sélectionner un ou1unObservableSéparer en plusieurs systèmes	race, partition	Concurrence de sources de données multiples, succès/Processus de ramification en cas d'échec
Système de branchement conditionnel	basé sur des conditionsObservablesélectionnées ou générées dynamiquement lors de l'inscription	iif, defer	Processus de ramification basé sur l'état de connexion, la création dynamique, l'évaluation différéeObservablecréation dynamique, évaluation différée
Système de contrôle	ObservableContrôle de la synchronisation de l'exécution et de la gestion des ressources	scheduled, using	Contrôle de la synchronisation de l'exécution par le planificateur, gestion du cycle de vie des ressources, prévention des fuites de mémoire

TIP

Séquence d'apprentissage

Il est recommandé aux nouveaux apprenants d'étudier dans l'ordre suivant

1. Système de création de base - RxJSLes fonctions de base de
2. Système couplé - Les bases de la gestion de flux multiples
3. HTTPSystèmes de communication - PratiqueAPITravailler avec des flux multiples en conjonction les uns avec les autres
4. Autres catégories - Apprentissage selon les besoins

Pipeable Operator Correspondance avec

Nombreux sont ceux quiCreation Functionsont un correspondantPipeable Operatorcorrespondant. Lorsqu'il est utilisé dans un pipeline,~Withles opérateurs de système sont utilisés.

Creation Function	Pipeable Operator	Remarque.
concat(a$, b$)	a$.pipe(concatWith(b$))	RxJS 7+
merge(a$, b$)	a$.pipe(mergeWith(b$))	RxJS 7+
zip(a$, b$)	a$.pipe(zipWith(b$))	RxJS 7+
combineLatest([a$, b$])	a$.pipe(combineLatestWith(b$))	RxJS 7+
race(a$, b$)	a$.pipe(raceWith(b$))	RxJS 7+

NOTE

RxJS 7Après,concatWith, mergeWith, zipWith, combineLatestWith, raceWith tels que~Withont été ajoutés,Pipeable OperatorIl est maintenant plus facile de les utiliser comme

Ce qui devrait être utilisé？

Creation FunctionetPipeable Operatordépend du contexte.

Creation Function Il est recommandé d'utiliser

Un système dans lequel plusieursObservablelorsqu'on opère au même niveau,Creation Functionafin de préserver la concision du code.

typescript.
// ✅ Fusionner plusieurs Observable au même niveau
const combined$ = merge(
  
  fromEvent(button2, 'click'), fromEvent(button3, 'click'), fromEvent(button4, 'click')
  fromEvent(button3, 'click')
) ;

Pipeable Operator Il est recommandé d'utiliser

Si vous ajoutez des opérations dans le cadre d'un pipeline,Pipeable Operatorpour clarifier le flux du processus.

typescript.
// ✅ Joindre en tant que partie d'un pipeline
const result$ = source$.pipe(
  map(x => x * 2),.
  mergeWith(other$),.
  filter(x => x > 10)
) ;

Résumé.

• Creation Functions : fonctions pour créer et combiner des Observable.
• Pipeable Operators : fonctions pour convertir des Observable existants.
• Les Creation Function se répartissent en sept catégories 1.Systèmes de création de base : création d'Observable basés sur les données, les tableaux, les événements et le temps. 2.Générateurs de boucles : représentent des processus itératifs sous forme d'Observable. 3.Système de communication HTTP : traiter la communication HTTP en tant qu'Observable. 4.Système de combinaison : combinez plusieurs éléments en un seul. 5.Systèmes de sélection et de division : sélectionner ou diviser. 6.Systèmes de branchement conditionnel : générer dynamiquement en fonction des conditions. 7. Systèmes de contrôle : contrôle du temps d'exécution et de la gestion des ressources.
• Pipeable Operator dans la famille ~With des pipelines.
• Chaque catégorie contient plusieurs fonctions qui peuvent être utilisées en fonction de l'application.

Prochaines étapes.

Pour en savoir plus sur chaque catégorie, suivez les liens ci-dessous.

1.Fonctions de création de base Fonctions de création - of, from, fromEvent, interval, timer 2.Génération de boucles Fonctions de Création - range, generate 3. Fonctions de création de communication HTTP - ajax, fromFetch 4.Fonctions Creation Function - concat, merge, combineLatest, zip, forkJoin 5.Fonctions de création de sélection et de partition - race, partition 6.Fonctions de Création de Branchements Conditionnels - iif, defer 7.Fonctions de contrôle Fonctions de création - scheduled, using

Sur chaque page, vous pouvez en apprendre davantage sur le fonctionnement détaillé des Creation Function et sur des exemples pratiques.

Ressources de référence.

• Documentation officielle RxJS - Creation Function
• Apprendre RxJS - Opérateurs de création