Perjalanan Reaksi Saya: Hari 12

Berlatih dengan Panggilan Balik dan Janji

Hari ini, saya menyahut cabaran untuk memperdalam pemahaman saya tentang panggilan balik dan janji—kedua-dua konsep asas untuk pengaturcaraan tak segerak dalam JavaScript. Begini keadaannya:

Cabaran 1: Panggilan Balik - Simulasi Pendaftaran Acara

Senario:
Mensimulasikan sistem pendaftaran acara di mana:

• Seorang pengguna cuba mendaftar untuk acara.
• Sistem menyemak sama ada terdapat slot yang tersedia.
• Kejayaan atau kegagalan disampaikan melalui panggilan balik.

Pelaksanaan Kod

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

Output:

• Jika slot tersedia: Kejayaan: Tahniah, Damilare. Anda telah didaftarkan untuk React Kelas induk.
• Jika slot penuh: Ralat: Maaf Damilare. Ruang acara React Masterclass telah ditempah sepenuhnya.

Refleksi:
Cabaran ini menyerlahkan cara panggilan balik mengendalikan tugas tak segerak, seperti kelewatan memproses dan mengurus hasil.

Cabaran 2: Janji - Mesej Aluan Tertunda

Senario:
Buat fungsi yang mengembalikan mesej alu-aluan selepas kelewatan yang ditentukan menggunakan janji.

Pelaksanaan Kod

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

Output:

• Untuk kelewatan yang sah:
  Selepas 3 saat:
  KEJAYAAN: Selamat datang ke dunia janji

• Untuk kelewatan tidak sah (mis., 0):
  RALAT: Kelewatan mestilah melebihi 0 milisaat

Refleksi:
Latihan ini memperkukuh cara janji meningkatkan kebolehbacaan dan mengurus aliran tak segerak dengan lebih baik daripada panggilan balik, terutamanya apabila berurusan dengan berbilang langkah.

Bawa pulang:
Panggilan balik: Berguna untuk mengurus operasi async yang mudah tetapi boleh menjadi kucar-kacir dengan sarang (neraka panggilan balik).
Janji: Menyediakan pendekatan yang lebih bersih dan berskala untuk mengendalikan tugas async.
Menggabungkan cabaran ini dengan senario dunia sebenar (seperti pendaftaran acara) menjadikan konsep lebih boleh dikaitkan dan menyeronokkan untuk diamalkan.

Saya teruja!

Atas ialah kandungan terperinci Perjalanan Reaksi Saya: Hari 12. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!