Menguasai Pengaturcaraan Asynchronous dalam JavaScript

Pengaturcaraan segerak ialah konsep penting dalam JavaScript, membolehkan anda mengendalikan operasi seperti panggilan API, pembacaan fail dan pemasa tanpa menyekat urutan utama. Jika anda baru dengan konsep ini atau ingin mengukuhkan pemahaman anda, siaran ini adalah untuk anda!

Apakah itu Pengaturcaraan Asynchronous?

Dalam pengaturcaraan segerak, tugasan dilaksanakan satu demi satu, yang boleh menyebabkan penggunaan sumber yang tidak cekap, terutamanya apabila berurusan dengan operasi yang mengambil masa (seperti permintaan rangkaian). Pengaturcaraan tak segerak membolehkan kod anda dijalankan sementara menunggu operasi ini selesai, meningkatkan prestasi dan responsif.

Konsep Utama

1. Panggil balik
2. Janji
3. Async/Tunggu

Mari kita pecahkan setiap konsep ini.

1. Panggilan balik

Panggil balik ialah fungsi yang dihantar sebagai hujah kepada fungsi lain dan dilaksanakan sebaik sahaja tugasan selesai. Walaupun mudah, panggilan balik boleh membawa kepada "neraka panggilan balik" apabila anda mempunyai fungsi bersarang.

function fetchData(callback) {
    setTimeout(() => {
        const data = "Data received!";
        callback(data);
    }, 1000);
}

fetchData((data) => {
    console.log(data); // Output: Data received!
});

**2. Janji
**Janji menyediakan alternatif yang lebih bersih kepada panggilan balik. Janji mewakili nilai yang mungkin tersedia sekarang, atau pada masa hadapan, atau tidak pernah. Ia boleh berada dalam salah satu daripada tiga keadaan: belum selesai, dipenuhi atau ditolak.

Berikut ialah cara menggunakan janji:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = "Data received!";
            resolve(data); // or reject(error);
        }, 1000);
    });
}

fetchData()
    .then((data) => {
        console.log(data); // Output: Data received!
    })
    .catch((error) => {
        console.error(error);
    });

**3. Async/Tunggu

Diperkenalkan pada ES2017, async dan tunggu menyediakan cara yang lebih mudah dibaca untuk bekerja dengan janji. Anda mentakrifkan fungsi sebagai tak segerak dan dalam fungsi itu, anda boleh menggunakan await untuk menjeda pelaksanaan sehingga janji diselesaikan.

async function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Data received!");
        }, 1000);
    });
}

async function getData() {
    try {
        const data = await fetchData();
        console.log(data); // Output: Data received!
    } catch (error) {
        console.error(error);
    }
}

getData();

Pengendalian Ralat

Apabila bekerja dengan kod tak segerak, pengendalian ralat yang betul adalah penting. Dengan janji, anda boleh menggunakan.catch(), dan dengan async/wait, anda boleh menggunakan try/catch block.

Contoh Dunia Nyata

Mari kita masukkan ini ke dalam konteks. Berikut ialah contoh mengambil data daripada API menggunakan fetch, yang mengembalikan janji:

async function fetchUserData(userId) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
        if (!response.ok) {
            throw new Error("Network response was not ok");
        }
        const userData = await response.json();
        console.log(userData);
    } catch (error) {
        console.error("Fetch error:", error);
    }
}

fetchUserData(1);

Kesimpulan

Pengaturcaraan tak segerak dalam JavaScript membolehkan anda menulis kod yang cekap dan responsif. Dengan menguasai panggilan balik, janji dan async/menunggu, anda akan dilengkapi dengan baik untuk mengendalikan operasi tak segerak dengan anggun.

Atas ialah kandungan terperinci Menguasai Pengaturcaraan Asynchronous dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!