JavaScript Asynchronous: Promises, Async/Await dan Callbacks

Asal diterbitkan di Makemychance.com

Pengaturcaraan tak segerak ialah konsep teras dalam JavaScript, yang membolehkan anda melaksanakan tugas tanpa menyekat pelaksanaan kod lain. Ini menjadi sangat penting apabila berurusan dengan operasi yang mengambil masa untuk diselesaikan, seperti permintaan rangkaian, fail I/O atau pemasa. Dalam artikel ini, kami akan meneroka tiga teknik utama untuk mengendalikan kod tak segerak dalam JavaScript: Panggilan Balik, Janji dan Async/Await.

1. Panggilan balik

Panggil balik ialah cara tertua untuk mengendalikan operasi tak segerak dalam JavaScript. Panggilan balik hanyalah fungsi yang dihantar sebagai hujah kepada fungsi lain, yang kemudiannya dilaksanakan selepas selesai tugasan.

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

fetchData((message) => {
  console.log(message);
});

Dalam contoh di atas, fetchData mensimulasikan permintaan rangkaian dengan setTimeout dan fungsi panggil balik merekodkan mesej selepas permintaan selesai.

Panggilan Balik Neraka

Salah satu kelemahan menggunakan panggilan balik ialah "neraka panggilan balik" atau "piramid azab" yang terkenal, di mana berbilang panggilan balik bersarang menjadikan kod sukar dibaca dan diselenggara.

fetchData((message) => {
  console.log(message);
  fetchMoreData((moreData) => {
    console.log(moreData);
    fetchEvenMoreData((evenMoreData) => {
      console.log(evenMoreData);
      // And so on...
    });
  });
});

2. Janji

Janji, yang diperkenalkan dalam ES6, menawarkan pendekatan yang lebih bersih untuk mengendalikan tugas tak segerak, membantu mengatasi cabaran panggilan balik bersarang dalam. Pada asasnya, janji ialah objek yang melambangkan hasil operasi tak segerak, sama ada ia berjaya diselesaikan atau gagal, dan ia menyediakan cara berstruktur untuk mengendalikan nilai yang terhasil.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

fetchData()
  .then((message) => {
    console.log(message);
    return "Next step";
  })
  .then((nextMessage) => {
    console.log(nextMessage);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

Dalam contoh ini, fetchData mengembalikan janji. Kaedah .then() digunakan untuk mengendalikan nilai janji yang diselesaikan dan .catch() digunakan untuk mengendalikan sebarang ralat.

Merangkai Janji

Janji boleh dirantai, menjadikan kod lebih mudah dibaca dan diselenggara.

fetchData()
  .then((message) => {
    console.log(message);
    return fetchMoreData();
  })
  .then((moreData) => {
    console.log(moreData);
    return fetchEvenMoreData();
  })
  .then((evenMoreData) => {
    console.log(evenMoreData);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

3. Async/Await

Async/Await, yang diperkenalkan dalam ES8 (2017), ialah gula sintaktik yang dibina di atas janji, menjadikan kod tak segerak kelihatan dan berkelakuan lebih seperti kod segerak.

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

async function processData() {
  try {
    const message = await fetchData();
    console.log(message);
    const moreData = await fetchMoreData();
    console.log(moreData);
    const evenMoreData = await fetchEvenMoreData();
    console.log(evenMoreData);
  } catch (error) {
    console.error("Error:", error);
  }
}

processData();

Dalam contoh ini, fungsi processData menggunakan kata kunci await untuk menunggu janji dikembalikan oleh fetchData untuk diselesaikan. Ini menjadikan kod lebih bersih dan lebih mudah untuk diikuti berbanding dengan janji merantai.

Pengendalian Ralat

Ralat pengendalian dalam async/menunggu dilakukan menggunakan try...catch block, menyediakan cara mudah untuk menangani ralat tanpa memerlukan kaedah .catch().

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

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