我的 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中文网其他相关文章！