我的 React 之旅：第 12 天

練習回調和 Promise

今天，我接受了挑戰，加深了對回呼和 Promise 的理解——這兩個都是 JavaScript 非同步程式設計的基本概念。事情是這樣的：

挑戰 1：回調 - 活動註冊模擬

場景：
模擬事件註冊系統，其中：

• 使用者嘗試註冊活動。
• 系統檢查是否有可用插槽。
• 成功或失敗透過回調傳達。

程式碼實作

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

輸出:

• 如果有空位： 成功：恭喜你，達米拉爾。您已註冊 React 大師班。
• 如果插槽已滿： 錯誤：對不起達米拉雷。 React Masterclass 活動場地已滿。

倒影:
這項挑戰強調了回調如何處理非同步任務，例如處理延遲和管理結果。

挑戰 2：承諾 - 延遲的歡迎訊息

場景：
使用 Promise 建立一個在指定延遲後傳回歡迎訊息的函數。

程式碼實作

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

輸出:

• 對於有效的延遲：
  3秒後：
  成功：歡迎來到承諾的世界

• 對於無效延遲（例如 0）：
  錯誤：延遲必須大於 0 毫秒

倒影:
這個練習強化了 Promise 如何比回調更好地提高可讀性和管理非同步流，特別是在處理多個步驟時。

外帶：
回調：對於管理簡單的非同步操作很有用，但可能會因嵌套而變得混亂（回調地獄）。
承諾：提供一種更乾淨、更可擴展的方法來處理非同步任務。
將這些挑戰與現實世界的場景（例如事件註冊）相結合，使這些概念在實踐中更加相關和有趣。

我很興奮！

以上是我的 React 之旅：第 12 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！