私の React の旅: 12 日目

コールバックとプロミスの練習

今日、私は、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 中国語 Web サイトの他の関連記事を参照してください。