Explication détaillée de rxjs

Cette fois, je vais vous apporter une explication détaillée de rxjs. Quelles sont les précautions lors de l'utilisation de rxjs. Voici des cas pratiques, jetons un coup d'oeil.

rxjs (Reactive Extensions for JavaScript) est une extension réactive de Javascript. L'idée réactive est de convertir les données, les statuts, les événements, etc. qui changent au fil du temps en une séquence observable (. Séquence observable), puis s'abonne aux modifications apportées aux objets dans la séquence. Une fois celle-ci modifiée, diverses transformations et opérations pré-arrangées seront effectuées.

rxjs convient aux scénarios asynchrones et peut être utilisé pour optimiser les requêtes et les événements dans les interactions frontales.

Fonctionnalités rxjs

Unifiez les spécifications de la programmation asynchrone. Qu'il s'agisse de Promise, d'ajax ou d'événements, elles sont toutes encapsulées dans des séquences (Séquence observable). en observant la séquence des informations modifiées.

La couche métier front-end et la couche de présentation sont découplées. Par exemple, la couche de présentation n'a pas besoin de se soucier de la logique de traitement qui n'a rien à voir avec le DOM lorsqu'un événement spécifié est déclenché. Dans le même temps, la couche métier peut également assembler la relation entre plusieurs logiques asynchrones dans des opérations asynchrones sans l'exposer à la couche de présentation. La couche de présentation concerne : les modifications de données dans le fonctionnement asynchrone.

La couche commerciale de développement rxjs présente les caractéristiques d'une élasticité élevée, d'une stabilité élevée et de performances en temps réel élevées.

Concept d'instance rxjs

Observable : séquence de données observables.

Observateur : instance d'observateur, décide quand observer les données spécifiées.

Abonnement : observer le la séquence de données renvoie l'instance d'abonnement.

Opérateurs : méthodes de fonctionnement d'Observable, y compris la conversion des séquences de données, le filtrage, etc. Les paramètres acceptés par toutes les méthodes des opérateurs sont les valeurs de la dernière modification de données envoyée et la méthode. la valeur de retour est appelée pour émettre de nouvelles modifications de données.

Sujet : objet observé.

Planificateurs : contrôlent la simultanéité de la planification, c'est-à-dire que lorsque l'observable accepte la réponse de modification du sujet, la méthode de réponse peut être défini via le planificateur. Actuellement, la réponse intégrée peut être visualisée en appelant Object.keys(Rx.Subject).

Observable a quatre cycles de vie : création, souscription, exécution et destruction.

Créez un Obervable et renvoyez l'instance source de la séquence observée. Cette instance n'a pas la capacité d'envoyer des données. En revanche, l'instance d'objet d'observation créée via le nouveau Rx.Subject a la capacité d'envoyer la source de données.

Vous pouvez vous abonner à la méthode de réponse (méthode de rappel) lorsque la séquence émet de nouvelles modifications de données via l'instance source de la séquence.

L'action de réponse est en fait l'exécution de l'Observable.

L'instance source de séquence peut être détruite, et elle sera automatiquement détruite lorsqu'une erreur se produit dans la méthode d'abonnement.

La méthode catch de l'instance source de séquence peut capturer les erreurs qui se produisent dans la méthode d'abonnement, et l'instance source de séquence peut accepter la valeur de retour de la méthode catch en tant que nouvelle instance source de séquence.

Opérateurs rxjs

rxjs fournit de nombreux opérateurs pour créer des objets observables

importer Rx depuis 'rxjs';

créer

let observable = Rx.Observable
    .create((observer)=> {
        observer.next('hello');
        observer.next('world');
    });    
//订阅Observable    observable.subscribe((value)=> {    console.log(value);
});

sortie : bonjour
monde

de

variable de valeur de conversion

let observable = Rx.Observable.of('hello', 'world');
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

sortie : bonjour
monde
terminé

de

Convertir la variable du tableau

let array = [1, 2, 3];let observable = Rx.Observable.from(array);
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

Sortie : 1

    2     3     complete
fromEvent

Convertir la variable d'événement

Rx.Observable.fromEvent(document.querySelector('button'), 'click');
fromPromise

Variable de conversion de promesse

let observable = Rx.Observable
.fromPromise(new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve('hello world');
    },3000)
}));
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

Sortie : bonjour tout le monde
complète

vide

L'opérateur vide renvoie un observable vide. à l'objet et il renverra immédiatement des informations complètes.

jamais

L'opérateur never renverra un Observable infini Si vous vous abonnez à cet objet, rien ne se passera. C'est un objet Observable qui existe toujours mais ne fait rien. L'opérateur

intervalle

intervalle prend en charge un paramètre de type numérique, qui est utilisé pour représenter l'intervalle de temps.

let observable = Rx.Observable.interval(1000);
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

Sortie : 0

    1
     2
     ...

Le code ci-dessus signifie que toutes les 1 secondes, une valeur croissante sera sortie et la valeur initiale commence à 0.

minuterie

L'opérateur de minuterie prend en charge deux paramètres. Le premier paramètre est utilisé pour définir le temps d'attente pour envoyer la première valeur. Le deuxième paramètre indique qu'après le premier envoi, le temps entre l'envoi. d'autres valeurs.

let observable = Rx.Observable.timer(1000, 5000);

observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

Sortie : 0 //Après 1s
1 //Après 5s
2 //5 secondes plus tard
...

Pull vs Push

Pull et Push sont deux méthodes de communication différentes entre les producteurs et les consommateurs de données

Pull

Dans le système Pull, le consommateur de données décide quand obtenir les données du producteur de données, et le producteur lui-même ne réalise pas quand les données seront envoyées au consommateur.
Chaque fonction JavaScript est un système Pull. La fonction est le producteur de données. Le code qui appelle la fonction consomme les données en extrayant une seule valeur de retour.
Itérateur et générateur dans ES6 Generator est un autre système Pull. Le code qui appelle iterator.next() est un consommateur et peut en extraire plusieurs valeurs.

Pousser

Dans le système Push, le producteur de données décide quand envoyer les données au consommateur, et le consommateur ne se rendra pas compte qu'il va recevoir les données avant de les recevoir.
Promise est le système Push le plus courant. Une Promise (producteur de données) envoie un résolu (statut de réussite) ou un rejet (statut d'échec) pour exécuter un rappel (consommateur de données), mais elle est différente d'une fonction en ce sens : La promesse détermine quand les données sont transmises à cette fonction de rappel .

RxJS présente les Observables (objets observables), un nouveau système Push. Un objet observable est un producteur qui génère plusieurs valeurs lorsque de nouvelles données sont générées, elles seront activement transmises à l'Observer.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Animation SVG dans le développement front-end

TypeScript que vous devez connaître

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!