Promesses en JavaScript et React Native : création, utilisation et scénarios courants

La gestion des tâches asynchrones est essentielle en JavaScript, en particulier dans des environnements comme React Native où la récupération de données, les animations et les interactions utilisateur doivent fonctionner de manière transparente. Les promesses constituent un moyen puissant de gérer les opérations asynchrones, rendant le code plus lisible et plus maintenable. Ce blog expliquera comment créer et utiliser des promesses en JavaScript, avec des exemples pratiques pertinents pour React Native.

Qu'est-ce qu'une promesse ?

Une Promesse en JavaScript est un objet qui représente l'achèvement (ou l'échec) éventuel d'une opération asynchrone. Cela nous permet de gérer le code asynchrone de manière plus synchrone, évitant ainsi le classique « enfer des rappels ». Les promesses ont trois états :

• En attente : L'état initial, ni rempli ni rejeté.
• Réalisé : L'opération s'est terminée avec succès.
• Rejeté : L'opération a échoué.

Créer une promesse

Pour créer une promesse, nous utilisons le constructeur Promise, qui prend une seule fonction (la fonction exécuteur) avec deux paramètres :

• solve : Appelez cette fonction pour remplir la promesse lorsque l'opération se termine avec succès.
• rejet : Appelez cette fonction pour rejeter la promesse si une erreur se produit.

Exemple : créer une promesse de base

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success/failure
      if (success) {
        resolve({ data: "Sample data fetched" });
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 2000); // Simulate a 2-second delay
  });
}

Dans cet exemple :

• Nous créons une promesse qui simule la récupération de données avec un setTimeout.
• Si la variable success est vraie, nous appelons solve() avec quelques données ; sinon, nous appelons rejet() avec un message d'erreur.

Utilisation de promesses avec .then(), .catch() et .finally()

Une fois qu'une promesse est créée, nous pouvons gérer son résultat en utilisant :

• .then() pour gérer les résolutions réussies,
• .catch() pour gérer les erreurs, et
• .finally() pour exécuter le code une fois la promesse réglée, quel que soit le résultat.

Exemple : gérer une promesse

fetchData()
  .then((result) => console.log("Data:", result.data)) // Handle success
  .catch((error) => console.error("Error:", error))    // Handle failure
  .finally(() => console.log("Fetch attempt completed")); // Finalize

Dans cet exemple :

• .then() est appelé si la promesse est résolue, imprimant les données.
• .catch() gère toutes les erreurs qui se produisent si la promesse est rejetée.
• .finally() s'exécute que la promesse soit résolue ou rejetée.

Cas d'utilisation pratiques des promesses dans React Native

1. Récupération de données à partir d'une API

Dans React Native, la récupération de données est une tâche asynchrone courante qui peut être gérée efficacement avec des promesses.

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok");
      return response.json();
    })
    .then(data => console.log("Fetched data:", data))
    .catch(error => console.error("Fetch error:", error));
}

// Usage
fetchData("https://api.example.com/data");

Cas d'utilisation : Récupération de données à partir d'API REST ou d'autres requêtes réseau, où nous devons gérer à la fois les réponses réussies et les erreurs.

2. Utilisation de promesses pour les opérations asynchrones séquentielles

Parfois, une tâche asynchrone dépend d'une autre. Les promesses permettent d’enchaîner facilement les opérations en séquence.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success/failure
      if (success) {
        resolve({ data: "Sample data fetched" });
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 2000); // Simulate a 2-second delay
  });
}

Cas d'utilisation : utile pour connecter un utilisateur, puis récupérer les données de profil en fonction de son identité.

3. Gestion de plusieurs promesses avec Promise.all()

Si vous avez plusieurs promesses indépendantes qui peuvent être exécutées en parallèle, Promise.all() vous permet d'attendre qu'elles soient toutes résolues ou que l'une d'entre elles soit rejetée.

fetchData()
  .then((result) => console.log("Data:", result.data)) // Handle success
  .catch((error) => console.error("Error:", error))    // Handle failure
  .finally(() => console.log("Fetch attempt completed")); // Finalize

Cas d'utilisation : récupération simultanée de plusieurs ressources, par exemple, récupération de publications et de commentaires à partir de points de terminaison d'API distincts.

4. Promesses de course avec Promise.race()

Avec Promise.race(), la première promesse qui s'installe (résout ou rejette) détermine le résultat. Ceci est utile lorsque vous souhaitez définir un délai d'attente pour une tâche de longue durée.

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok");
      return response.json();
    })
    .then(data => console.log("Fetched data:", data))
    .catch(error => console.error("Fetch error:", error));
}

// Usage
fetchData("https://api.example.com/data");

Cas d'utilisation : Définition d'un délai d'expiration pour les requêtes réseau, afin qu'elles ne se bloquent pas indéfiniment si le serveur est lent ou ne répond pas.

5. Utilisation de Promise.allSettled() pour gérer des résultats mitigés

Promise.allSettled() attend que toutes les promesses soient réglées, qu'elles soient résolues ou rejetées. Ceci est utile lorsque vous avez besoin des résultats de toutes les promesses, même si certaines échouent.

function authenticateUser() {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ userId: 1, name: "John Doe" }), 1000);
  });
}

function fetchUserProfile(user) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ ...user, profile: "Profile data" }), 1000);
  });
}

// Chain promises
authenticateUser()
  .then(user => fetchUserProfile(user))
  .then(profile => console.log("User Profile:", profile))
  .catch(error => console.error("Error:", error));

Cas d'utilisation : utile lors de l'exécution de plusieurs requêtes dont certaines peuvent échouer, comme la récupération de sources de données facultatives ou l'exécution de plusieurs appels d'API.

Techniques avancées : conversion des rappels en promesses

Les bases de code plus anciennes ou certaines bibliothèques peuvent utiliser des rappels au lieu de promesses. Vous pouvez envelopper ces rappels dans des promesses, en les convertissant en fonctions modernes basées sur des promesses.

Exemple : encapsuler un rappel dans une promesse

const fetchPosts = fetch("https://api.example.com/posts").then(res => res.json());
const fetchComments = fetch("https://api.example.com/comments").then(res => res.json());

Promise.all([fetchPosts, fetchComments])
  .then(([posts, comments]) => {
    console.log("Posts:", posts);
    console.log("Comments:", comments);
  })
  .catch(error => console.error("Error fetching data:", error));

Cas d'utilisation : Cette technique vous permet de travailler avec du code existant basé sur le rappel d'une manière respectueuse des promesses, le rendant compatible avec la syntaxe async/wait moderne.

Résumé

Les promesses sont des outils puissants pour gérer les opérations asynchrones en JavaScript et React Native. En comprenant comment créer, utiliser et gérer des promesses dans divers scénarios, vous pouvez écrire un code plus propre et plus maintenable. Voici un bref récapitulatif des cas d’utilisation courants :

• Demandes API : Récupération de données depuis un serveur avec gestion des erreurs.
• Opérations de chaînage : Exécution de tâches dépendantes en séquence.
• Opérations parallèles : exécuter plusieurs promesses simultanément avec Promise.all().
• Timeouts et Racing : Limitation de la durée des requêtes avec Promise.race().
• Résultats mitigés : Utilisation de Promise.allSettled() pour les tâches qui peuvent échouer partiellement.
• Conversion des rappels : Encapsulation des fonctions basées sur les rappels dans des promesses de compatibilité avec la syntaxe moderne.

En tirant efficacement parti des promesses, vous pouvez rendre la programmation asynchrone en JavaScript et React Native plus propre, plus prévisible et plus robuste.

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!