Menguasai JavaScript Asynchronous: Panggilan Balik, Janji dan Async/Await

JavaScript tak segerak

JavaScript tak segerak membenarkan tugasan dilaksanakan secara bebas daripada urutan utama, memastikan aplikasi kekal responsif dan cekap. Ini amat penting untuk mengendalikan operasi seperti panggilan API, pembacaan fail atau kelewatan.

---

1. Kod Segerak lwn. Tak Segerak

Kod Segerak:

• Melaksanakan baris demi baris dalam urutan.
• Sekat operasi seterusnya sehingga operasi semasa selesai.

Contoh:

console.log("Start");
console.log("End");
// Output:
// Start
// End

Kod Asynchronous:

• Membenarkan operasi lain diteruskan sementara menunggu tugasan selesai.
• Menggunakan panggilan balik, janji atau async/menunggu untuk mengendalikan keputusan.

Contoh:

console.log("Start");
setTimeout(() => {
  console.log("Async Task");
}, 2000);
console.log("End");
// Output:
// Start
// End
// Async Task

---

2. Kaedah Pengaturcaraan Asynchronous

a. Panggilan balik

Panggil balik ialah fungsi yang dihantar sebagai hujah kepada fungsi lain, dilaksanakan selepas selesai tugas tak segerak.

Contoh:

function fetchData(callback) {
  setTimeout(() => {
    callback("Data fetched!");
  }, 2000);
}

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

Kelemahan:

• Membawa kepada "neraka panggil balik" apabila merantai berbilang operasi tak segerak.

b. Janji

Janji mewakili nilai yang mungkin tersedia sekarang, pada masa hadapan atau tidak.

Negeri Janji:

• Belum selesai: Keadaan awal.
• Dipenuhi: Selesai dengan jayanya.
• Ditolak: Gagal.

Mencipta Janji:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 2000);
});

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

Mengendalikan Ralat:

fetchData
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

c. Async/Tunggu

async dan tunggu menyediakan sintaks yang lebih mudah dibaca untuk bekerja dengan janji.

Contoh:

async function fetchData() {
  const data = await new Promise((resolve) => {
    setTimeout(() => resolve("Data fetched!"), 2000);
  });
  console.log(data); // Output: Data fetched!
}

fetchData();

Pengendalian Ralat:

async function fetchData() {
  try {
    const data = await new Promise((resolve, reject) => {
      reject("Error fetching data!");
    });
    console.log(data);
  } catch (error) {
    console.error(error); // Output: Error fetching data!
  }
}
fetchData();

---

3. Kes Penggunaan Asynchronous

a. Panggilan API dengan Ambil

API pengambilan ialah cara moden untuk membuat permintaan HTTP.

async function getData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await response.json();
  console.log(data);
}
getData();

b. Pendengar Acara

Tingkah laku tak segerak dalam pengendalian acara.

document.getElementById("button").addEventListener("click", () => {
  setTimeout(() => {
    console.log("Button clicked!");
  }, 1000);
});

c. Pemasa

Menggunakan setTimeout dan setInterval untuk kelewatan.

setTimeout(() => console.log("Timeout executed!"), 2000);

---

4. Gelung Acara

Gelung Acara ialah mekanisme yang menguruskan operasi tak segerak dalam JavaScript. Tugasan disusun beratur dan dilaksanakan mengikut susunan berikut:

1. Timbunan Panggilan: Melaksanakan kod segerak.
2. Baris Gilir Tugas: Melaksanakan panggilan balik tak segerak (cth., setTimeout).
3. Baris Gilir Tugasan Mikro: Melaksanakan resolusi janji.

Contoh:

console.log("Start");
console.log("End");
// Output:
// Start
// End

---

5. Perangkap Biasa

1. Terlupa Mengendalikan Ralat:

   • Sentiasa gunakan .catch() atau cuba/tangkap untuk janji.

2. Menyekat Benang Utama:

   • Elakkan tugas segerak yang berjalan lama.

3. Neraka Panggil Balik:

   • Gunakan janji atau async/tunggu sebaliknya.

---

6. Ringkasan

Technique	Description
Callbacks	Functions executed after async tasks.
Promises	Chained mechanism for async tasks.
Async/Await	Cleaner syntax for handling promises.

Memahami dan memanfaatkan pengaturcaraan tak segerak dalam JavaScript adalah penting untuk mencipta aplikasi web yang responsif dan cekap. Dengan menguasai panggilan balik, janji dan async/menunggu, pembangun boleh mengurus tugas tak segerak dengan berkesan.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Menguasai JavaScript Asynchronous: Panggilan Balik, Janji dan Async/Await. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!