Memahami Async JavaScript

JavaScript ialah bahasa satu utas, bermakna ia hanya boleh melakukan satu perkara pada satu masa. Walau bagaimanapun, aplikasi web selalunya perlu melaksanakan tugas seperti mengambil data daripada pelayan, yang boleh mengambil sedikit masa. Jika JavaScript terpaksa menunggu setiap tugas selesai sebelum meneruskan, ia akan menjadikan apl web anda perlahan dan tidak bertindak balas. Di sinilah JavaScript tak segerak (tak segerak) masuk.

Apakah JavaScript Async?

JavaScript tak segerak membenarkan kod anda untuk memulakan tugas dan kemudian beralih ke tugas lain sementara menunggu tugasan itu selesai. Setelah tugas selesai, kod anda boleh kembali dan mengendalikan hasilnya. Ini membantu memastikan apl anda cepat dan responsif.

Konsep Utama dalam JavaScript Async

1. Segerak lwn. Tak segerak:

   • Segerak: Setiap tugasan menunggu tugasan sebelumnya selesai sebelum bermula. Contohnya:

    console.log("Start");
    let result = someFunction(); // This might take a while
    console.log("End");
   

   Salin selepas log masuk

   Dalam kod segerak, mesej "Tamat" hanya akan dilog selepas someFunction() selesai, yang boleh memperlahankan keadaan.

• Asynchronous: Tugasan boleh bermula dan selesai secara berasingan, jadi kod anda tidak tersekat menunggu. Contohnya:
  

   console.log("Start");
   setTimeout(() => {
       console.log("End");
   }, 2000);
  

  Salin selepas log masuk

  Di sini, mesej "Tamat" akan dilog selepas 2 saat, tetapi sementara itu, kod anda boleh terus melakukan perkara lain.

1. Panggil balik:

   • panggilan balik ialah fungsi yang dihantar sebagai hujah kepada fungsi lain, yang akan dilaksanakan selepas tugasan selesai.
   • Contoh:

    function fetchData(callback) {
        setTimeout(() => {
            let data = "Some data";
            callback(data);
        }, 2000);
    }
   
    fetchData((data) => {
        console.log(data); // This will log "Some data" after 2 seconds
    });
   

   Salin selepas log masuk

• Panggil balik ialah cara asal untuk mengendalikan tugas async, tetapi ia boleh menjadi rumit, terutamanya jika anda mempunyai banyak tugas untuk diurus (ini dikenali sebagai "neraka panggil balik").

1. Janji:

   • janji ialah objek yang mewakili penyiapan (atau kegagalan) tugas tak segerak dan nilai yang terhasil.
   • Contoh:

    let promise = new Promise((resolve, reject) => {
        let success = true;
        if (success) {
            resolve("Task completed successfully!");
        } else {
            reject("Task failed!");
        }
    });
   
    promise.then((message) => {
        console.log(message);
    }).catch((error) => {
        console.log(error);
    });
   

   Salin selepas log masuk

• selesaikan: Jika tugasan berjaya diselesaikan, janji akan "diselesaikan" dengan nilai.
• tolak: Jika tugasan gagal, janji itu "ditolak" dengan mesej ralat.
• .then(): Mengendalikan nilai yang dikembalikan jika janji itu diselesaikan.
• .catch(): Mengendalikan ralat jika janji ditolak.

1. Async/Tunggu:

   • async dan menunggu ialah ciri JavaScript moden yang menjadikan kerja dengan janji lebih mudah dan lebih mudah dibaca.
   • async: Fungsi yang diisytiharkan dengan async akan sentiasa mengembalikan janji.
   • menunggu: Menjeda pelaksanaan fungsi async sehingga janji diselesaikan.
   • Contoh:

    async function fetchData() {
        try {
            let data = await someAsyncTask();
            console.log(data);
        } catch (error) {
            console.error("Error:", error);
        }
    }
   

   Salin selepas log masuk

• Dalam contoh ini, kata kunci await digunakan untuk menunggu someAsyncTask selesai sebelum beralih ke baris kod seterusnya. Jika tugasan gagal, ralat akan ditangkap dan dikendalikan dalam blok tangkapan.

Ringkasan

• JavaScript Async membantu menghalang apl anda daripada menjadi perlahan dan tidak bertindak balas dengan membenarkan kod anda mengendalikan berbilang tugas pada masa yang sama.
• Panggil balik ialah fungsi yang dijalankan selepas tugas async selesai, tetapi boleh menjadi kucar-kacir dengan tugasan yang rumit.
• Janji menyediakan cara yang lebih bersih untuk mengendalikan operasi async, mewakili tugasan yang akan diselesaikan pada masa hadapan.
• Async/Await ialah sintaks moden yang menjadikan kerja dengan janji lebih mudah dan lebih mudah dibaca.

Memahami JavaScript async adalah penting untuk membina aplikasi web yang responsif dan cekap, kerana ia membolehkan kod anda melaksanakan tugas tanpa tersekat menunggu operasi perlahan selesai.

Atas ialah kandungan terperinci Memahami Async JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!