Un aperçu des promesses JavaScript - SitePoint

Ce tutoriel explore JavaScript Promises, un outil puissant pour gérer les opérations asynchrones. Nous couvrirons la création de promesses, le chaînage, la gestion des erreurs et les méthodes avancées.

Concepts clés:

• Opérations asynchrones: tâches JavaScript qui ne renvoient pas immédiatement les résultats. Promet les génies avec élégance.
• Promesse états: Les promesses existent dans trois états: En attente (initial), FALUPLÉ (Achèvement réussi), et rejeté ( échec).
• Création de promesse: Le constructeur new Promise((resolve, reject) => { ... }) initie une promesse. resolve Signals Succès, reject Signaux Fails.
• CHAMING avec .then(): Exécutez séquentiellement des tâches asynchrones en utilisant .then(). Chaque .then() reçoit le résultat de la promesse précédente.
• Gestion des erreurs avec .catch(): Gérer les erreurs en utilisant .catch(), qui gère les refus n'importe où dans la chaîne.
• Nettoyage avec .finally(): Exécuter le code indépendamment de la réalisation ou du rejet en utilisant .finally(). Idéal pour les tâches de nettoyage.
• Méthodes de promesse avancées: Promise.all, Promise.race, Promise.any, et Promise.allSettled offrent des moyens sophistiqués de gérer plusieurs promesses.

Au-delà des rappels ("Hellback Hell"):

Avant les promesses, des rappels ont été utilisés pour les opérations asynchrones. Les rappels imbriqués (Hellback Hell) ont conduit à un code complexe et difficile à maintenir. Les promesses offrent une alternative plus propre et plus lisible.

Créer une promesse:

Un exemple de promesse simple:

const myPromise = new Promise((resolve, reject) => {
  // Asynchronous operation (e.g., network request)
  setTimeout(() => {
    const success = true; // Simulate success or failure
    if (success) {
      resolve("Operation successful!");
    } else {
      reject("Operation failed!");
    }
  }, 1000);
});

en utilisant .then() et .catch():

myPromise
  .then(result => console.log(result)) // Handles successful resolution
  .catch(error => console.error(error)); // Handles rejection

Promesse de chaînage:

Promesses de chaîne pour l'exécution séquentielle:

myPromise
  .then(result => {
    console.log(result);
    return anotherPromise(); // Return another promise to continue the chain
  })
  .then(nextResult => console.log(nextResult))
  .catch(error => console.error(error));

.finally() pour le nettoyage:

myPromise
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log("Promise settled")); // Always runs

Méthodes avancées:

• Promise.all([promise1, promise2, ...]): attend toutes les promesses de résoudre. Rejette si une promesse rejette.
• Promise.allSettled([promise1, promise2, ...]): attend toutes les promesses de régler (résoudre ou rejeter), renvoyant un tableau de résultats.
• Promise.any([promise1, promise2, ...]): résout avec le résultat de la première promesse de résoudre. Rejette si toutes les promesses rejettent.
• Promise.race([promise1, promise2, ...]): résout ou rejette avec le résultat de la première promesse de régler.

async/await (sucre syntaxique):

async/await simplifie le code basé sur les promesses:

const myPromise = new Promise((resolve, reject) => {
  // Asynchronous operation (e.g., network request)
  setTimeout(() => {
    const success = true; // Simulate success or failure
    if (success) {
      resolve("Operation successful!");
    } else {
      reject("Operation failed!");
    }
  }, 1000);
});

Choisir la bonne approche:

• Rappels: adaptés aux tâches asynchrones simples.
• Promis: Idéal pour les opérations asynchrones complexes nécessitant un chaînage et une manipulation d'erreurs.
• async/await: fournit une syntaxe plus propre pour travailler avec les promesses, rendant le code asynchrone plus lisible.

Questions fréquemment posées:

• Qu'est-ce qu'une promesse JavaScript? Un objet représentant le résultat éventuel d'une opération asynchrone.
• Comment fonctionnent les promesses? Ils passent par des états en attente, réalisés et rejetés.
• Comment créez-vous une promesse? Utilisez le constructeur Promise.
• Comment gérez-vous les résultats de promesse? Utiliser .then() pour réussir, .catch() pour les erreurs, et .finally() pour le nettoyage.
• Qu'est-ce que la promesse de chaînage? liant plusieurs appels .then() pour des tâches asynchrones séquentielles.
• Qu'est-ce que Promise.all? attend plusieurs promesses de résoudre simultanément.
• Comment async/await se rapporte-t-il aux promesses? C'est une syntaxe plus propre pour travailler avec les promesses.

Cette réponse améliorée fournit une explication plus complète et structurée des promesses JavaScript, ce qui le rend plus facile à comprendre et à appliquer. N'oubliez pas de remplacer /uploads/20250211/173923342367aa988f9d605.webp et /uploads/20250211/173923342367aa988fc80e2.webp par des URL d'image réelles si vous souhaitez inclure des images.

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!