Meine Reaktionsreise: Tag 12

Üben Sie mit Rückrufen und Versprechen

Heute habe ich Herausforderungen angenommen, um mein Verständnis von Rückrufen und Versprechen zu vertiefen – beides grundlegende Konzepte für die asynchrone Programmierung in JavaScript. So lief es:

Herausforderung 1: Rückruf – Simulation der Veranstaltungsregistrierung

Szenario:
Simulierte ein Veranstaltungsregistrierungssystem, bei dem:

• Ein Benutzer versucht, sich für eine Veranstaltung zu registrieren.
• Das System prüft, ob Slots verfügbar sind.
• Erfolg oder Misserfolg wird über Rückrufe kommuniziert.

Code-Implementierung

// 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);

Ausgabe:

• Wenn Slots verfügbar sind: Erfolg: Herzlichen Glückwunsch, Damilare. Sie wurden für React registriert Meisterkurs.
• Wenn die Slots voll sind: Fehler: Tut mir leid, Damilare. Der Veranstaltungsraum React Masterclass ist ausgebucht.

Reflexion:
Diese Herausforderung verdeutlichte, wie Rückrufe mit asynchronen Aufgaben umgehen, z. B. Verarbeitungsverzögerungen und Ergebnisverwaltung.

Herausforderung 2: Versprechen – Verspätete Willkommensnachricht

Szenario:
Erstellen Sie mithilfe von Versprechen eine Funktion, die nach einer bestimmten Verzögerung eine Willkommensnachricht zurückgibt.

Code-Implementierung

// 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));

Ausgabe:

• Für eine gültige Verzögerung:
  Nach 3 Sekunden:
  ERFOLGREICH: Willkommen in der Welt der Versprechen

• Für eine ungültige Verzögerung (z. B. 0):
  FEHLER: Die Verzögerung muss größer als 0 Millisekunden sein

Reflexion:
Diese Übung verdeutlichte, wie Versprechen die Lesbarkeit verbessern und asynchrone Abläufe besser verwalten als Rückrufe, insbesondere wenn es um mehrere Schritte geht.

Imbissbuden:
Rückrufe: Nützlich für die Verwaltung einfacher asynchroner Vorgänge, kann aber bei der Verschachtelung zu Problemen führen (Rückrufhölle).
Versprechen: Bieten Sie einen saubereren, skalierbareren Ansatz für die Handhabung asynchroner Aufgaben.
Durch die Kombination dieser Herausforderungen mit realen Szenarien (z. B. der Registrierung von Veranstaltungen) wurden die Konzepte verständlicher und es machte Spaß, sie zu üben.

Ich bin aufgeregt!

Das obige ist der detaillierte Inhalt vonMeine Reaktionsreise: Tag 12. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!