Maison > interface Web > js tutoriel > Observable vs Promesse

Observable vs Promesse

DDD
Libérer: 2024-11-27 21:22:11
original
411 Les gens l'ont consulté

Observable v/s Promise

*Observables * et *Promises * sont tous deux utilisés pour gérer les opérations asynchrones en JavaScript, mais ils présentent quelques différences clés :

Promesses

  • Valeur unique : les promesses gèrent un seul événement asynchrone et renvoient une seule valeur (ou erreur).
  • Eager : les promesses commencent à s'exécuter immédiatement après la création.
  • Non annulable : une fois qu'une promesse est initiée, elle ne peut pas être annulée.
  • Syntaxe : utilise .then(), .catch() et .finally() pour les opérations de chaînage.

Exemple :

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise resolved!');
  }, 1000);
});

promise.then((value) => {
  console.log(value);
});
Copier après la connexion

Observables

  • Valeurs multiples : les observables peuvent émettre plusieurs valeurs au fil du temps.
  • Paresseux : les observables ne commencent pas à émettre des valeurs tant qu'ils ne sont pas abonnés.
  • Annulable : les abonnements aux observables peuvent être annulés, arrêtant ainsi l'émission des valeurs.
  • Syntaxe : utilise .subscribe() pour gérer les valeurs émises, les erreurs et l'achèvement.

Exemple :

import { Observable } from 'rxjs';

const observable = new Observable((subscriber) => {
  subscriber.next('First value');
  setTimeout(() => {
    subscriber.next('Second value');
    subscriber.complete();
  }, 1000);
});

const subscription = observable.subscribe({
  next(value) {
    console.log(value);
  },
  complete() {
    console.log('Observable complete');
  }
});

// To cancel the subscription
subscription.unsubscribe();
Copier après la connexion

Quand les utiliser

  • Utilisez Promises lorsque vous devez gérer une seule opération asynchrone.
  • Utilisez Observables lorsque vous devez gérer plusieurs événements ou valeurs asynchrones au fil du temps, et lorsque vous avez besoin de plus de contrôle sur le flux de données (par exemple, annulation, transformation).

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal