Anne  de Morel

Anne de Morel

1657800671

Comment Utiliser L'opérateur forkJoin Dans RxJS

Dans cet article, vous apprendrez à utiliser l'opérateur forkJoin dans RxJS.

forkJoin est l'un des opérateurs de combinaison les plus populaires en raison de son comportement similaire à Promise.all mais pour observables .

forkJoin accepte un nombre variable d'observables et s'y abonne en parallèle. Lorsque tous les observables fournis sont terminés, forkJoin collecte la dernière valeur émise de chacun et les émet sous forme de tableau (c'est par défaut, plus à ce sujet plus tard).

🔍 "émettre" est le terme utilisé pour signifier quand un observable "produit" une valeur !

Créons un observable avec forkJoin qui combine 3 observables qui émettent chacun une seule valeur, puis complétons, en utilisant l'opérateur of :

const joined$ = forkJoin(
  of(3),
  of('foo')
  of(42)
);

joined$.subscribe(console.log);

Ce qui produit la sortie :

[3, "foo", 42] 

À titre de comparaison, voici comment cela Promise.allfonctionne :

Promise.all([
  Promise.resolve(3),
  new Promise((resolve, reject) => setTimeout(resolve, 3000, 'foo')),
  42
]).then(values => console.log(values));

Qui produit :

[3, "foo", 42]

C'est donc l'utilisation de base de l'opérateur forkJoin dans RxJS, allons un peu plus loin.

Commande et exécution parallèle

Il convient de noter que l'opérateur forkJoin conservera l'ordre des observables internes, quel que soit le moment où ils se terminent.

Pour démontrer cela, créons 2 observables retardés où le deuxième observable se terminera en premier :

const joinedAndDelayed$ = forkJoin(
  of('Hey').pipe(delay(2000)),
  of('Ho').pipe(delay(3000)),
  of('Lets go!').pipe(delay(1000))
);

joinedAndDelayed$.subscribe(console.log);

Le premier observable, bien qu'il soit terminé en dernier, sera toujours le premier résultat dans le tableau de sortie car forkJoin préserve l'ordre des observables qui ont été transmis - nous donnant :

['Hey', 'Ho', 'Lets go!'];

La sortie est produite après 3 secondes, ce qui montre que toutes les observables internes sont exécutées en parallèle.

Options de sortie alternatives avec forkJoin

Par défaut, forkJoin produira un résultat sous la forme d'un tableau de valeurs comme dans les exemples ci-dessus.

Depuis RxJS 6.5+, le résultat peut également être produit sous forme d'objet en fournissant une carte d'objet comme argument à forkJoin au lieu d'arguments séparés par des virgules :

const joinedWithObjectForm$ = forkJoin({
  hey: of('Hey'),
  ho: of('Ho')
});

joinedWithObjectForm$.subscribe(console.log);

Cela vous renverra alors un dictionnaire de résultats, plutôt qu'un tableau, que vous trouverez peut-être plus lisible :

{ hey: "Hey", ho: "Ho" }

Quelle que soit la méthode que vous choisissez, je vous suggère d'être cohérent tout au long de votre candidature.

Durée de vie observable intérieure et forkJoin

Comme forkJoin ne se termine que lorsque tous les observables internes sont terminés, nous devons être attentifs si un observable ne se termine jamais. Si cela se produit, forkJoin ne se terminera jamais non plus.

En utilisant un intervalle, nous pouvons nous assurer que forkJoin ne se terminera jamais et vous verrez l'intervalle se connecter en permanence à la console :

const joinedWithIntervalNeverCompleting$ = forkJoin(
  of('completed!'),
  interval(1000).pipe(tap(i => console.log(`tick ${i}`)))
);

joinedWithIntervalNeverCompleting$.subscribe(console.log);

Production:

tick 0
tick 1
tick 2
tick 3

forever...  

Assurez-vous que tous les observables fournis à forkJoin finissent par se terminer.

Ajoutons l' opérateur de prise à notre intervalle, qui complétera une observable après némissions (ici nous utiliserons 3) :

const joinedWithIntervalCompleting$ = forkJoin(
  of('completed!'),
  interval(1000).pipe(
    tap(i => console.log(`ticking ${i}`)),
    take(3)
  )
);

joinedWithIntervalCompleting$.subscribe(console.log);

Quelles sorties :

['completed!', 2];

Le nombre 2à l'intérieur de la sortie du tableau confirme que seule la dernière valeur émise par les observables internes sera sortie dans le résultat de forkJoin - les valeurs antérieures (le cas échéant) étant ignorées.

Utilisation de forkJoin avec fromEvent

Il est toujours bon de démontrer l'utilisation de l'opérateur forkJoin lorsque vous cliquez sur un bouton afin que nous puissions en savoir plus :

<button id="btn1">click once!</button>
<button id="btn2">click twice!</button>
<button id="btn3">click 3 times!</button>

On peut alors construire dynamiquement une observable avec une fonction d'abstraction qui utilise en interne fromEvent:

const fromEventWithId = (id) => {
  return fromEvent(document.getElementById(`btn${id}`), 'click')
    .pipe(take(id));
};

forkJoin(
  fromEventWithId(1),
  fromEventWithId(2),
  fromEventWithId(3)
).subscribe(console.log);

Our idn'est pas seulement utilisé dans le cadre d'un sélecteur, mais est également transmis à take(id).

Cela signifie que nous devrons cliquer sur les boutons 1, 2 et 3 fois, respectivement, pour obtenir le résultat déconnecté de la console.

Si vous ne cliquez pas dessus le nombre de fois requis, les observables internes ne se termineront pas (et nous savons ce qui se passe alors - rien !).

Gestion des erreurs avec forkJoin

Maintenant, démontrons un observable interne lançant une erreur - il y a 2 façons de gérer les erreurs ici.

Le premier, nous allons attraper l'erreur au niveau forkJoin (mais vous devez vous rappeler qu'il ne produira que la sortie de l' catchErrorobservable).

Cela signifie que même si les observables internes sont terminées avec succès, le résultat ne contiendra pas de valeurs émises par les observables internes :

const joinedErroringWithOuterCatch$ = forkJoin(
  of('Hey!'),
  throwError('boooom!')
).pipe(catchError(error => of(error)));

joinedErroringWithOuterCatch$.subscribe(console.log);

production:

boooom!  

Remarquez comment 'Hey!'n'est pas émis en raison de l'erreur, malgré la réussite.

La deuxième façon de gérer les erreurs se situe au niveau observable interne. Avec cette approche, la sortie contiendra à la fois des messages d'erreur et des émissions de valeur réussies provenant d'autres observables qui ont complété - bien mieux :

const joinedErroringWitInnerCatch$ = forkJoin(
  of('Hey!'),
  throwError('boooom!').pipe(catchError(error => of(error)))
);

joinedErroringWitInnerCatch$.subscribe(console.log);

production:

['Hey!', 'boooom!'];

Gérer un nombre variable de demandes

Comme dernier exemple de forkJoin, il peut arriver que vous ayez besoin de gérer dynamiquement un nombre variable de requêtes.

Voici comment vous pouvez créer une fonction d'assistance pour envoyer un nombre variable de requêtes http en utilisant forkJoin et l' API de récupération du navigateur :

const joinWithVariableRequests$ = (...args) => {
  return forkJoin(args.map(e => fetch(e).then(e => e.json())));
};

En utilisant l'opérateur de propagation avec ...argscet observable peut être utilisé avec n'importe quel nombre d'urls :

joinWithVariableRequests$(
  'https://aws.random.cat/meow',
  'https://api.agify.io?name=michael'
).subscribe(console.log);

Puisque nous extrayons le jsoncorps de la réponse ( then(e => e.json()))), l'exemple ci-dessus produira un tableau de corps de réponse :

[
  {
    file: 'https://purr.objects-us-east-1.dream.io/i/img_1013.jpg'
  },
  {
    age: 68,
    count: 233482,
    name: 'michael'
  }
];

Vous pouvez trouver tous les exemples de code de cet article dans l'intégration StackBlitz ci-dessous :

Sommaire

Nous avons couvert beaucoup de terrain ici, de la combinaison d'observables réussis et erronés aux intervalles et aux événements DOM.

forkJoin est un opérateur de combinaison extrêmement puissant qui vous aidera à combiner vos observables.

N'oubliez pas ces conseils courants (et pièges) lors de l'utilisation de l'opérateur forkJoin RxJS :

  • Array versus Object output, en examinant l'alternative et la nouvelle syntaxe pour utiliser un objet au lieu d'un résultat de tableau
  • Comment les erreurs peuvent affecter le résultat de sortie et comment gérer correctement les erreurs au niveau observable interne ou externe
  • Tous les observables internes doivent être terminés avant que forkJoin n'émette un résultat !

Merci d'avoir lu, bonne combinaison !

Source : https://ultimatecourses.com/blog/rxjs-forkjoin-combine-observables

#rxjs 

What is GEEK

Buddha Community

Comment Utiliser L'opérateur forkJoin Dans RxJS
Anne  de Morel

Anne de Morel

1657800671

Comment Utiliser L'opérateur forkJoin Dans RxJS

Dans cet article, vous apprendrez à utiliser l'opérateur forkJoin dans RxJS.

forkJoin est l'un des opérateurs de combinaison les plus populaires en raison de son comportement similaire à Promise.all mais pour observables .

forkJoin accepte un nombre variable d'observables et s'y abonne en parallèle. Lorsque tous les observables fournis sont terminés, forkJoin collecte la dernière valeur émise de chacun et les émet sous forme de tableau (c'est par défaut, plus à ce sujet plus tard).

🔍 "émettre" est le terme utilisé pour signifier quand un observable "produit" une valeur !

Créons un observable avec forkJoin qui combine 3 observables qui émettent chacun une seule valeur, puis complétons, en utilisant l'opérateur of :

const joined$ = forkJoin(
  of(3),
  of('foo')
  of(42)
);

joined$.subscribe(console.log);

Ce qui produit la sortie :

[3, "foo", 42] 

À titre de comparaison, voici comment cela Promise.allfonctionne :

Promise.all([
  Promise.resolve(3),
  new Promise((resolve, reject) => setTimeout(resolve, 3000, 'foo')),
  42
]).then(values => console.log(values));

Qui produit :

[3, "foo", 42]

C'est donc l'utilisation de base de l'opérateur forkJoin dans RxJS, allons un peu plus loin.

Commande et exécution parallèle

Il convient de noter que l'opérateur forkJoin conservera l'ordre des observables internes, quel que soit le moment où ils se terminent.

Pour démontrer cela, créons 2 observables retardés où le deuxième observable se terminera en premier :

const joinedAndDelayed$ = forkJoin(
  of('Hey').pipe(delay(2000)),
  of('Ho').pipe(delay(3000)),
  of('Lets go!').pipe(delay(1000))
);

joinedAndDelayed$.subscribe(console.log);

Le premier observable, bien qu'il soit terminé en dernier, sera toujours le premier résultat dans le tableau de sortie car forkJoin préserve l'ordre des observables qui ont été transmis - nous donnant :

['Hey', 'Ho', 'Lets go!'];

La sortie est produite après 3 secondes, ce qui montre que toutes les observables internes sont exécutées en parallèle.

Options de sortie alternatives avec forkJoin

Par défaut, forkJoin produira un résultat sous la forme d'un tableau de valeurs comme dans les exemples ci-dessus.

Depuis RxJS 6.5+, le résultat peut également être produit sous forme d'objet en fournissant une carte d'objet comme argument à forkJoin au lieu d'arguments séparés par des virgules :

const joinedWithObjectForm$ = forkJoin({
  hey: of('Hey'),
  ho: of('Ho')
});

joinedWithObjectForm$.subscribe(console.log);

Cela vous renverra alors un dictionnaire de résultats, plutôt qu'un tableau, que vous trouverez peut-être plus lisible :

{ hey: "Hey", ho: "Ho" }

Quelle que soit la méthode que vous choisissez, je vous suggère d'être cohérent tout au long de votre candidature.

Durée de vie observable intérieure et forkJoin

Comme forkJoin ne se termine que lorsque tous les observables internes sont terminés, nous devons être attentifs si un observable ne se termine jamais. Si cela se produit, forkJoin ne se terminera jamais non plus.

En utilisant un intervalle, nous pouvons nous assurer que forkJoin ne se terminera jamais et vous verrez l'intervalle se connecter en permanence à la console :

const joinedWithIntervalNeverCompleting$ = forkJoin(
  of('completed!'),
  interval(1000).pipe(tap(i => console.log(`tick ${i}`)))
);

joinedWithIntervalNeverCompleting$.subscribe(console.log);

Production:

tick 0
tick 1
tick 2
tick 3

forever...  

Assurez-vous que tous les observables fournis à forkJoin finissent par se terminer.

Ajoutons l' opérateur de prise à notre intervalle, qui complétera une observable après némissions (ici nous utiliserons 3) :

const joinedWithIntervalCompleting$ = forkJoin(
  of('completed!'),
  interval(1000).pipe(
    tap(i => console.log(`ticking ${i}`)),
    take(3)
  )
);

joinedWithIntervalCompleting$.subscribe(console.log);

Quelles sorties :

['completed!', 2];

Le nombre 2à l'intérieur de la sortie du tableau confirme que seule la dernière valeur émise par les observables internes sera sortie dans le résultat de forkJoin - les valeurs antérieures (le cas échéant) étant ignorées.

Utilisation de forkJoin avec fromEvent

Il est toujours bon de démontrer l'utilisation de l'opérateur forkJoin lorsque vous cliquez sur un bouton afin que nous puissions en savoir plus :

<button id="btn1">click once!</button>
<button id="btn2">click twice!</button>
<button id="btn3">click 3 times!</button>

On peut alors construire dynamiquement une observable avec une fonction d'abstraction qui utilise en interne fromEvent:

const fromEventWithId = (id) => {
  return fromEvent(document.getElementById(`btn${id}`), 'click')
    .pipe(take(id));
};

forkJoin(
  fromEventWithId(1),
  fromEventWithId(2),
  fromEventWithId(3)
).subscribe(console.log);

Our idn'est pas seulement utilisé dans le cadre d'un sélecteur, mais est également transmis à take(id).

Cela signifie que nous devrons cliquer sur les boutons 1, 2 et 3 fois, respectivement, pour obtenir le résultat déconnecté de la console.

Si vous ne cliquez pas dessus le nombre de fois requis, les observables internes ne se termineront pas (et nous savons ce qui se passe alors - rien !).

Gestion des erreurs avec forkJoin

Maintenant, démontrons un observable interne lançant une erreur - il y a 2 façons de gérer les erreurs ici.

Le premier, nous allons attraper l'erreur au niveau forkJoin (mais vous devez vous rappeler qu'il ne produira que la sortie de l' catchErrorobservable).

Cela signifie que même si les observables internes sont terminées avec succès, le résultat ne contiendra pas de valeurs émises par les observables internes :

const joinedErroringWithOuterCatch$ = forkJoin(
  of('Hey!'),
  throwError('boooom!')
).pipe(catchError(error => of(error)));

joinedErroringWithOuterCatch$.subscribe(console.log);

production:

boooom!  

Remarquez comment 'Hey!'n'est pas émis en raison de l'erreur, malgré la réussite.

La deuxième façon de gérer les erreurs se situe au niveau observable interne. Avec cette approche, la sortie contiendra à la fois des messages d'erreur et des émissions de valeur réussies provenant d'autres observables qui ont complété - bien mieux :

const joinedErroringWitInnerCatch$ = forkJoin(
  of('Hey!'),
  throwError('boooom!').pipe(catchError(error => of(error)))
);

joinedErroringWitInnerCatch$.subscribe(console.log);

production:

['Hey!', 'boooom!'];

Gérer un nombre variable de demandes

Comme dernier exemple de forkJoin, il peut arriver que vous ayez besoin de gérer dynamiquement un nombre variable de requêtes.

Voici comment vous pouvez créer une fonction d'assistance pour envoyer un nombre variable de requêtes http en utilisant forkJoin et l' API de récupération du navigateur :

const joinWithVariableRequests$ = (...args) => {
  return forkJoin(args.map(e => fetch(e).then(e => e.json())));
};

En utilisant l'opérateur de propagation avec ...argscet observable peut être utilisé avec n'importe quel nombre d'urls :

joinWithVariableRequests$(
  'https://aws.random.cat/meow',
  'https://api.agify.io?name=michael'
).subscribe(console.log);

Puisque nous extrayons le jsoncorps de la réponse ( then(e => e.json()))), l'exemple ci-dessus produira un tableau de corps de réponse :

[
  {
    file: 'https://purr.objects-us-east-1.dream.io/i/img_1013.jpg'
  },
  {
    age: 68,
    count: 233482,
    name: 'michael'
  }
];

Vous pouvez trouver tous les exemples de code de cet article dans l'intégration StackBlitz ci-dessous :

Sommaire

Nous avons couvert beaucoup de terrain ici, de la combinaison d'observables réussis et erronés aux intervalles et aux événements DOM.

forkJoin est un opérateur de combinaison extrêmement puissant qui vous aidera à combiner vos observables.

N'oubliez pas ces conseils courants (et pièges) lors de l'utilisation de l'opérateur forkJoin RxJS :

  • Array versus Object output, en examinant l'alternative et la nouvelle syntaxe pour utiliser un objet au lieu d'un résultat de tableau
  • Comment les erreurs peuvent affecter le résultat de sortie et comment gérer correctement les erreurs au niveau observable interne ou externe
  • Tous les observables internes doivent être terminés avant que forkJoin n'émette un résultat !

Merci d'avoir lu, bonne combinaison !

Source : https://ultimatecourses.com/blog/rxjs-forkjoin-combine-observables

#rxjs 

Sasha  Roberts

Sasha Roberts

1650625200

How to Handle RxJS Error in angular In 6 Minutes

In this video, you will learn how to use error handling in angular rxjs utilizing the error callback function of the observer, and also how to use the catchError #rxjs operato

✨ Code: https://github.com/profanis/codeShotsWithProfanis/tree/33/rxjs-error-handling

#angular #rxjs 

Kattie  Quitzon

Kattie Quitzon

1633499640

Real-Life Analog of RxJs ZIP Operator

In this video, we continue to look for real-life analogs for #rxjs operators, and today we are going to look at the ZIP operator. This operator allows you to combine multiple streams together and emit an array of values arrived from combined streams. Additionally, this operator cares about the order of how values should be paired (it is hard to explain it with text - better one time to see). I hope you will find this video useful. Stay tuned and enjoy watching!

🕒 Time Codes:
00:00:00 - Intro;
00:00:39 - Mental model for ZIP operator;
00:02:56 - Let's code it!;
00:13:20 - Outro;

#rxjs  #angular  #webdevelopers 

Cómo Usar El Operador SwitchMap En RxJS En angular

Tutorial sobre el uso del operador switchMap en #RxJS (ReactiveX) en #Angular. Dura más de lo habitual debido a que lo explicamos con dos ejemplos, uno muy básico y uno de los típicamente llamados "Ejemplo de la Vida Real" (Real life example). Para ver los puntos más importantes, les dejamos los siguientes minutos:

#rxjs #angular 

Moriah  Fisher

Moriah Fisher

1595504520

All You Need To Know About Comments in Ruby

It is well known that the ruby comments are used to leave notes or micro-docs within the code and is ignored by the Ruby Interpreter. But can we do other things with comments?

There are several other functions that comments can offer. In this article, we shall dive into some of the use cases of comments that can have certain desirable impacts on the Ruby interpreter. Each use case has been explained in detail making it easier for even beginners to understand.


Shebang Comments

Shebang is a “comment” that indicates the interpreter directive for the interpreter to be used when the file is run as an executable in *nix operating systems. This specific comment is not unique to Ruby. Many scripting languages make use of the shebang to make scripts executable in a simple manner.

in addition to specifying the interpreter directive, you can also specify the flags like — jit or -w which will automatically be passed on to the interpreter when the executable is run. Let’s take a look at how this can be done:

#magic-comments #ruby #frozen-string-literals #comment #encoding