Programmation réactive avec JavaScript et RxJS

La programmation réactive est un paradigme de programmation qui gère les flux de données asynchrones. C'est une façon d'écrire du code qui répond plus rapidement aux changements et gère plus efficacement les événements et les flux de données.

En programmation réactive, les données sont représentées comme un flux d'événements. Ces événements peuvent aller de l'entrée de l'utilisateur aux requêtes réseau en passant par les mises à jour de la base de données. Le programme s'abonne ensuite à ces événements et réagit lorsqu'ils se produisent.

Cette méthode de programmation présente de nombreux avantages. Premièrement, cela facilite le travail avec des données asynchrones. En programmation traditionnelle, les données asynchrones peuvent être difficiles à gérer car il est difficile de savoir quand les données seront disponibles. La programmation réactive, quant à elle, gère les données asynchrones de manière plus naturelle en les traitant comme un flux d'événements.

Deuxièmement, la programmation réactive permet d'améliorer les performances de votre code. En vous abonnant aux événements, votre code peut être averti dès que de nouvelles données sont disponibles, il n'a donc pas besoin d'interroger des données ni d'attendre qu'un événement se produise.

Enfin, la programmation réactive peut aider votre code à être plus maintenable. En traitant les données comme un flux d'événements, votre code devient plus déclaratif et il est plus facile de comprendre comment les différentes parties du code interagissent les unes avec les autres.

RxJS

RxJS est une bibliothèque JavaScript qui fournit une API de programmation réactive. Il s'agit d'une bibliothèque populaire utilisée par de nombreux frameworks JavaScript populaires tels que Angular et React.

RxJS offre de nombreuses fonctionnalités qui le rendent idéal pour la programmation réactive. Ces fonctionnalités incluent -

• Observables− Les observables sont les éléments de base de RxJS. Ils représentent des flux d'événements et peuvent être utilisés pour représenter tout type de données, notamment des nombres, des chaînes, des objets et des tableaux.

• Opérateurs− Les opérateurs sont des fonctions qui peuvent être utilisées pour transformer, filtrer et combiner des observables. Il existe un grand nombre d'opérateurs disponibles dans RxJS, qui permettent d'effectuer diverses opérations avec les Observables.

• Scheduler− Le planificateur est utilisé pour contrôler le timing des observables. Ils peuvent être utilisés pour déclencher le déclenchement des observables à des moments précis ou pour retarder l'émission d'événements.

Installer RxJS

Pour commencer à utiliser RxJS, nous devons l'installer. Ouvrez un terminal et exécutez la commande suivante -

npm install rxjs

Une fois l'installation terminée, nous pouvons commencer à explorer la puissance de la programmation réactive RxJS.

Créer des observables

Les observables sont au cœur de RxJS. Ils représentent un flux de données que les abonnés peuvent observer.

Commençons par créer un observable simple qui émet une séquence de nombres -

Exemple

import { Observable } from 'rxjs';

const numberObservable = new Observable((observer) => {
   let count = 0;

   const interval = setInterval(() => {
      observer.next(count);
      count++;

      if (count > 5) {
         clearInterval(interval);
         observer.complete();
      }
   }, 1000);
});

numberObservable.subscribe((number) => {
   console.log(number);
});

Instructions

Dans le code ci-dessus, nous créons un Observable en utilisant la classe Observable dans RxJS. À l'intérieur du constructeur, nous définissons la logique d'émission des valeurs. Dans cet exemple, nous utilisons setInterval pour émettre un nombre chaque seconde. Une fois que le décompte atteint 5, nous arrêtons l'intervalle et appelons observer.complete() pour signaler la fin du flux.

Pour observer les valeurs émises par l'Observable, nous appelons la méthode Subscribe et fournissons une fonction de rappel. Dans ce cas, la fonction de rappel enregistre simplement le numéro émis sur la console.

Sortie

0 
1
2 
3 
4
5

Opérateurs dans RxJS

RxJS fournit une large gamme d'opérateurs qui nous permettent de transformer, filtrer, combiner et manipuler les données émises par les observables. Examinons quelques opérateurs courants.

Opérateur de carte

L'opérateur

map nous permet de transformer les valeurs émises par un Observable. Par exemple, modifions l'exemple précédent pour doubler le nombre émis -

Exemple

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

const numberObservable = new Observable((observer) => {
   let count = 0;

   const interval = setInterval(() => {
      observer.next(count);
      count++;

      if (count > 5) {
         clearInterval(interval);
         observer.complete();
      }
   }, 1000);
});

numberObservable
   .pipe(map((number) => number * 2))
   .subscribe((number) => {
      console.log(number);
   });

Instructions

Dans ce code, nous utilisons la méthode pipeline pour relier l'opérateur de cartographie à notre Observable. L'opérateur de mappage prend une fonction de rappel qui convertit chaque numéro émis en le doublant. La valeur résultante est ensuite transmise à la fonction de rappel de l'abonné.

Sortie

0
2
4
6
8 
10

Opérateur de filtre

L'opérateur de filtre nous permet de filtrer sélectivement les valeurs émises par un observable en fonction des conditions. Ajoutons un filtre à l'exemple précédent pour n'émettre que des nombres pairs -

示例

import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';

const numberObservable = new Observable((observer) => {
   let count = 0;

   const interval = setInterval(() => {
      observer.next(count);
      count++;

      if (count > 5) {
         clearInterval(interval);
         observer.complete();
      }
   }, 1000);
});

numberObservable
   .pipe(filter((number) => number % 2 === 0))
   .subscribe((number) => {
      console.log(number);
   });

说明

在提供的代码中，我们创建了一个名为 numberObservable 的 Observable，它发出一系列数字。 Observable 使用 setInterval 发出从 0 开始的数字，每秒递增 1。发出数字 5 后，间隔被清除，Observable 使用observer.complete() 发出完成信号。

接下来，我们使用管道方法将过滤运算符应用于 numberObservable。过滤器运算符采用定义条件的回调函数。它过滤掉不满足条件的值，只允许偶数通过。

最后，我们订阅过滤后的 Observable，并使用订阅者的回调函数将每个发出的数字记录到控制台。

输出

0
2
4

结论

总之，使用 JavaScript 和 RxJS 进行响应式编程提供了一种强大而有效的方法来处理异步数据流和构建响应式应用程序。通过拥抱 Observables 的概念并利用 RxJS 提供的丰富的运算符集，开发人员可以以声明式且优雅的方式轻松操作、转换和组合数据流。

通过本文讨论的示例，我们了解了如何创建 Observables、应用映射和过滤器等运算符来转换和过滤发出的值，以及订阅 Observables 来接收和处理数据。 RxJS 通过提供一致且可组合的方法简化了复杂异步流的管理。

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!