Memahami Kod Asynchronous dalam JavaScript: Apa Itu dan Mengapa Ia Penting

Jika anda telah menggunakan JavaScript untuk seketika, anda mungkin menghadapi konsep kod tak segerak. Sama ada anda membuat permintaan API, menunggu input pengguna atau memuatkan set data yang besar, operasi tak segerak adalah penting untuk memastikan aplikasi anda berjalan lancar.

Tetapi apakah sebenarnya kod tak segerak itu? Dan bagaimanakah ia berbeza daripada kod segerak? Dalam siaran ini, kami akan menguraikannya dan meneroka sebab pengaturcaraan tak segerak ialah penukar permainan dalam JavaScript.

Apakah Kod Asynchronous?

Dalam istilah mudah, kod tak segerak membenarkan tugasan dijalankan di latar belakang tanpa menyekat aliran pelaksanaan utama. Ini bermakna daripada menunggu operasi (seperti permintaan rangkaian) selesai, program boleh terus melaksanakan kod lain.

Tingkah laku ini amat penting dalam JavaScript kerana ia benang tunggal, bermakna hanya satu tugasan boleh dijalankan pada satu masa pada urutan utama. Tanpa kod tak segerak, operasi yang berjalan lama akan menyekat keseluruhan program, menjadikan apl tidak bertindak balas.

Kod Segerak lwn Tak Segerak: Perbandingan Pantas

Mari kita mulakan dengan membandingkan cara kod segerak dan tak segerak berkelakuan dalam amalan.

Contoh Kod Segerak

function fetchData() {
  const data = getDataFromServer(); // Assume this takes 3 seconds
  console.log(data);
}

console.log('Start');
fetchData(); // Blocks the code until data is fetched
console.log('End'); // This will only run after 3 seconds, when fetchData completes

Dalam contoh segerak ini, semuanya berlaku satu langkah pada satu masa. Apabila fetchData() dipanggil, ia menyekat kod yang lain (termasuk console.log('End')) sehingga data diambil, mengakibatkan kelewatan 3 saat.

Contoh Kod Asynchronous

Sekarang, mari lihat contoh yang sama yang ditulis dengan kod tak segerak.

async function fetchData() {
  const data = await getDataFromServer(); // Assume this takes 3 seconds
  console.log(data);
}

console.log('Start');
fetchData(); // This starts fetching data in the background
console.log('End'); // This runs immediately, without waiting for fetchData to complete

Di sini, kod tidak disekat. fetchData() mula berjalan, tetapi bukannya menunggu data diambil, kod itu terus ke console.log('End'). Data akan direkodkan apabila operasi pengambilan selesai.

Ini ialah kuasa kod tak segerak—ia memastikan aplikasi berjalan dan responsif, walaupun semasa menunggu operasi perlahan selesai.

Mengapa Menggunakan Kod Asynchronous?

Terdapat beberapa sebab mengapa kod tak segerak adalah penting dalam JavaScript:

1. Operasi tanpa sekatan

Apabila berurusan dengan tugas seperti permintaan rangkaian, membaca fail atau berinteraksi dengan pangkalan data, anda tidak mahu program anda membeku. Kod tak segerak memastikan operasi yang berjalan lama tidak menyekat seluruh aplikasi, membolehkannya kekal responsif.

2. Prestasi Dipertingkat

Pengaturcaraan tak segerak membolehkan berbilang tugasan dijalankan serentak. Sebagai contoh, anda boleh mengambil data daripada berbilang API pada masa yang sama tanpa menunggu setiap permintaan selesai secara berurutan. Keselarasan ini meningkatkan prestasi keseluruhan apl anda.

3. Mengendalikan Operasi Lambat

Sebarang operasi yang mengambil masa yang tidak diketahui, seperti mengambil data daripada pelayan, adalah calon yang baik untuk kod tak segerak. Dengan tidak menyekat urutan utama, apl anda boleh mengendalikan operasi perlahan dengan lebih cekap.

Corak Asynchronous dalam JavaScript

JavaScript menyediakan beberapa cara untuk mengendalikan operasi tak segerak. Jom tengok salah satunya.

Async/Tunggu

async dan menunggu membolehkan anda menulis kod tak segerak yang kelihatan dan berkelakuan seperti kod segerak, meningkatkan kebolehbacaan dan menjadikan pengendalian ralat lebih mudah.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Dengan menggunakan fungsi tak segerak dan menunggu janji, anda boleh menjeda pelaksanaan fungsi sehingga janji diselesaikan, menjadikan kod tak segerak lebih mudah untuk difikirkan.

Pengendalian Ralat dalam Kod Asynchronous

Mengendalikan ralat dalam kod tak segerak boleh menjadi rumit. Dalam kod segerak, ralat biasanya ditangkap menggunakan try...catch. Walau bagaimanapun, dengan tugasan tak segerak, ralat mungkin tidak berlaku serta-merta, jadi anda memerlukan strategi yang berbeza untuk mengendalikannya.

Dengan Janji:

Anda mengendalikan ralat menggunakan .catch():

fetch('https://api.example.com')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error)); // Error is handled here

Dengan Async/Await:

Dalam fungsi async, anda boleh menggunakan try...catch untuk mengendalikan ralat sama seperti yang anda lakukan dalam kod segerak:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error); // Error is handled here
  }
}

Ini menjadikan pengendalian ralat dalam kod tak segerak lebih intuitif.

Kesimpulan

Kod tak segerak ialah konsep asas dalam JavaScript, terutamanya apabila bekerja dengan tugasan yang mungkin mengambil masa yang tidak diketahui, seperti permintaan rangkaian atau operasi fail. Dengan memahami cara kod tak segerak berfungsi dan menggunakan corak seperti Promises dan async/wait, anda boleh menulis aplikasi yang lebih cekap, responsif dan boleh diselenggara.

Pengambilan Utama:

• Kod tak segerak tidak menyekat, membenarkan bahagian lain program untuk terus berjalan sementara menunggu tugasan selesai.

• JavaScript menawarkan beberapa cara untuk mengendalikan operasi tak segerak, termasuk async/menunggu.

• Memahami cara mengendalikan ralat dalam kod tak segerak adalah penting untuk menulis aplikasi yang mantap.

Atas ialah kandungan terperinci Memahami Kod Asynchronous dalam JavaScript: Apa Itu dan Mengapa Ia Penting. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!