Mon parcours React : jour 12

Entraînez-vous avec les rappels et les promesses

Aujourd'hui, j'ai relevé des défis pour approfondir ma compréhension des rappels et des promesses, deux concepts fondamentaux de la programmation asynchrone en JavaScript. Voici comment ça s'est passé :

Défi 1 : Rappel - Simulation d'inscription à un événement

Scénario :
Simulation d'un système d'inscription à un événement où :

• Un utilisateur tente de s'inscrire à un événement.
• Le système vérifie s'il y a des emplacements disponibles.
• Le succès ou l'échec est communiqué via des rappels.

Mise en œuvre du code

// Event Data
const event = {
    name: "React Masterclass",
    maxSlots: 5,
    currentRegistration: 3,
};

// Registration Function
function registerForEvent(event, user, successCallback, errorCallback) {
    console.log(`Registration of ${user} in progress...`);
    setTimeout(() => {
        if (event.currentRegistration < event.maxSlots) {
            event.currentRegistration++;
            successCallback(`Congratulations, ${user}. You have been registered for ${event.name}`);
        } else {
            errorCallback(`Sorry ${user}. The event space ${event.name} is fully booked`);
        }
    }, 2000); // Simulating 2-second delay
}

// Callbacks
function onSuccess(message) {
    console.log("Success:", message);
}

function onError(error) {
    console.log("Error:", error);
}

// Simulate Registration
registerForEvent(event, "Damilare", onSuccess, onError);

Sortie :

• Si des créneaux sont disponibles : Succès : Félicitations, Damilare. Vous avez été inscrit à React Classe de maître.
• Si les créneaux sont complets : Erreur : Désolé Damilare. L'espace événementiel React Masterclass est complet.

Réflexion :
Ce défi a mis en évidence la façon dont les rappels gèrent les tâches asynchrones, telles que les retards de traitement et la gestion des résultats.

Défi 2 : Promesses - Message de bienvenue retardé

Scénario :
Créez une fonction qui renvoie un message de bienvenue après un délai spécifié à l'aide de promesses.

Mise en œuvre du code

// Promise Function
function delayedWelcomeMessage(message, delay) {
    return new Promise((resolve, reject) => {
        if (delay <= 0) {
            reject("Delay must be greater than 0 milliseconds");
        } else {
            setTimeout(() => {
                resolve(message);
            }, delay);
        }
    });
}

// Valid Delay
delayedWelcomeMessage("Welcome to the world of promises", 3000)
  .then((message) => console.log("SUCCESS:", message))
  .catch((error) => console.error("ERROR:", error));

// Invalid Delay
delayedWelcomeMessage("This will fail.", 0)
  .then((message) => console.log("SUCCESS:", message))
  .catch((error) => console.error("ERROR:", error));

Sortie :

• Pour un délai valable :
  Après 3 secondes :
  SUCCÈS : Bienvenue dans le monde des promesses

• Pour un délai invalide (par exemple, 0) :
  ERREUR : le délai doit être supérieur à 0 milliseconde

Réflexion :
Cet exercice a renforcé la façon dont les promesses améliorent la lisibilité et gèrent mieux les flux asynchrones que les rappels, en particulier lorsqu'il s'agit de plusieurs étapes.

À retenir :
Rappels : utiles pour gérer des opérations asynchrones simples, mais peuvent devenir compliqués avec l'imbrication (l'enfer des rappels).
Promesses : fournir une approche plus propre et plus évolutive de la gestion des tâches asynchrones.
La combinaison de ces défis avec des scénarios du monde réel (comme l'inscription à un événement) a rendu les concepts plus pertinents et plus amusants à mettre en pratique.

Je suis excitée !

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!