Menguasai Async/Await: Menangani Rantai Fungsi Asinkron di JavaScript

Berurusan dengan Rangkaian Fungsi Asinkron di JavaScript

Operasi asinkron adalah bagian penting dari pemrograman JavaScript modern, yang memungkinkan eksekusi non-pemblokiran di lingkungan seperti browser dan Node.js. Namun, mengelola aliran fungsi asinkron yang saling memanggil bisa jadi rumit, terutama bila Anda ingin menunggu fungsi terakhir dalam rantai tanpa menghentikan keseluruhan proses.

Dalam skenario ini, kita sering mengandalkan JavaScript async/menunggu Dan Janji untuk menangani aliran asinkron yang kompleks. Namun ada kalanya penggunaan Promises atau menunggu setiap pemanggilan fungsi tidak sesuai, seperti ketika program harus melanjutkan eksekusi tanpa menunggu respons segera. Hal ini menghadirkan tantangan baru bagi pengembang.

Contoh yang Anda berikan menampilkan situasi umum di mana beberapa fungsi dipicu secara asinkron, dan kita memerlukan cara untuk mendeteksi kapan fungsi terakhir dipanggil. Menggunakan Promises tradisional di sini dapat membatasi karena menghentikan fungsi pemanggilan, memaksanya menunggu hasilnya alih-alih melanjutkan alirannya.

Pada artikel ini, kita akan mempelajari cara mengatasi masalah ini dengan JavaScript async/menunggu mekanisme. Kita akan melihat pendekatan praktis untuk memastikan fungsi utama dapat dilanjutkan tanpa menunggu langsung, sambil tetap melihat penyelesaian fungsi terakhir dalam rangkaian.

Memahami Penanganan Fungsi Asinkron dengan Async/Await dan Callback

Skrip pertama menggunakan async/menunggu untuk mengelola eksekusi fungsi asinkron. Itu asinkron kata kunci memungkinkan fungsi mengembalikan janji, membuatnya lebih mudah untuk menangani operasi asinkron secara berurutan. Dalam hal ini, functionFirst bertanggung jawab untuk memanggil functionSecond menggunakan asynchronous setWaktu habis. Meskipun functionFirst tidak menunggu hingga functionSecond selesai, kami memanfaatkannya menunggu di functionMain untuk memastikan bahwa thread utama menunggu selesainya semua operasi asinkron sebelum melanjutkan. Hal ini memberikan kontrol yang lebih baik terhadap aliran peristiwa asinkron sambil mempertahankan perilaku non-pemblokiran di JavaScript.

Keuntungan utama dari pendekatan ini adalah kita dapat menangani aliran asinkron yang kompleks tanpa menghalangi pelaksanaan fungsi lainnya. Daripada memaksa program untuk menunggu di setiap pemanggilan fungsi, async/await memungkinkan kode untuk terus dieksekusi sambil menunggu janji diselesaikan di latar belakang. Hal ini meningkatkan kinerja dan menjaga antarmuka pengguna tetap responsif dalam aplikasi front-end. Penundaan di setiap fungsi menyimulasikan tugas asinkron aktual, seperti permintaan server atau kueri database. Mekanisme Promise terselesaikan ketika semua fungsi dalam rantai dijalankan, memastikan pernyataan log akhir hanya muncul setelah semuanya selesai.

Dalam solusi kedua, kami menggunakan panggilan balik untuk mencapai aliran asinkron non-pemblokiran yang serupa. Saat functionFirst dipanggil, ia akan mengaktifkan functionSecond dan segera kembali tanpa menunggu selesai. Fungsi panggilan balik yang diteruskan sebagai argumen membantu mengendalikan aliran dengan memicu fungsi berikutnya dalam rantai ketika fungsi saat ini selesai. Pola ini sangat berguna dalam lingkungan di mana kita memerlukan kontrol lebih langsung atas urutan eksekusi tanpa menggunakan janji atau async/menunggu. Namun, callback dapat menyebabkan “callback hell” ketika berhadapan dengan rantai operasi asinkron yang dalam.

Terakhir, solusi ketiga digunakan Node.js EventEmitter untuk menangani panggilan asinkron dengan cara yang lebih canggih. Dengan memancarkan peristiwa khusus setelah setiap fungsi asinkron selesai, kita mendapatkan kendali penuh atas kapan harus memicu fungsi berikutnya. Pemrograman berbasis peristiwa sangat efektif di lingkungan backend, karena memungkinkan kode yang lebih skalabel dan mudah dipelihara ketika menangani beberapa operasi asinkron. Itu memancarkan Metode mengirimkan sinyal ketika peristiwa tertentu terjadi, dan pendengar menangani peristiwa ini secara asinkron. Metode ini memastikan bahwa fungsi utama hanya berlanjut setelah fungsi terakhir dalam rantai dijalankan, sehingga menawarkan pendekatan yang lebih modular dan dapat digunakan kembali untuk manajemen tugas asinkron.

// Solution 1: Using async/await with Promises in JavaScript
async function functionFirst() {
  console.log('First is called');
  setTimeout(functionSecond, 1000);
  console.log('First fired Second and does not wait for its execution');
  return new Promise(resolve => {
    setTimeout(resolve, 2000); // Set timeout for the entire chain to complete
  });
}

function functionSecond() {
  console.log('Second is called');
  setTimeout(functionLast, 1000);
}

function functionLast() {
  console.log('Last is called');
}

async function functionMain() {
  await functionFirst();
  console.log('called First and continue only after Last is done');
}

functionMain();

// Solution 2: Using Callbacks to Manage Asynchronous Flow Without Blocking
function functionFirst(callback) {
  console.log('First is called');
  setTimeout(() => {
    functionSecond(callback);
  }, 1000);
  console.log('First fired Second and does not wait for its execution');
}

function functionSecond(callback) {
  console.log('Second is called');
  setTimeout(() => {
    functionLast(callback);
  }, 1000);
}

function functionLast(callback) {
  console.log('Last is called');
  callback();
}

function functionMain() {
  functionFirst(() => {
    console.log('called First and continue only after Last is done');
  });
}

functionMain();

// Solution 3: Using Node.js EventEmitter to Handle Asynchronous Functions
const EventEmitter = require('events');
const eventEmitter = new EventEmitter();

function functionFirst() {
  console.log('First is called');
  setTimeout(() => {
    eventEmitter.emit('secondCalled');
  }, 1000);
  console.log('First fired Second and does not wait for its execution');
}

function functionSecond() {
  console.log('Second is called');
  setTimeout(() => {
    eventEmitter.emit('lastCalled');
  }, 1000);
}

function functionLast() {
  console.log('Last is called');
}

eventEmitter.on('secondCalled', functionSecond);
eventEmitter.on('lastCalled', functionLast);

function functionMain() {
  functionFirst();
  eventEmitter.on('lastCalled', () => {
    console.log('called First and continue only after Last is done');
  });
}

functionMain();

Teknik Tingkat Lanjut untuk Mengelola Eksekusi Fungsi Asinkron di JavaScript

Saat menggunakan async/menunggu Dan panggilan balik efektif untuk menangani aliran asinkron dalam JavaScript, alat canggih lainnya yang patut mendapat perhatian adalah penggunaan JavaScript generator dikombinasikan dengan fungsionalitas async. Fungsi generator memungkinkan Anda mengembalikan kendali ke pemanggil, menjadikannya sempurna untuk menangani proses berulang. Dengan menggabungkan generator dengan Janji, Anda dapat menjeda dan melanjutkan eksekusi dengan cara yang lebih terkontrol, sehingga menawarkan lapisan fleksibilitas lain untuk alur kerja asinkron.

Generator bisa sangat berguna dalam skenario ketika Anda memerlukan kontrol yang lebih terperinci atas panggilan fungsi asinkron. Mereka bekerja dengan memungkinkan Anda menghasilkan eksekusi pada titik tertentu dan menunggu sinyal eksternal atau resolusi yang dijanjikan untuk dilanjutkan. Hal ini berguna jika Anda memiliki ketergantungan yang kompleks antar fungsi atau memerlukan operasi non-pemblokiran dalam beberapa langkah. Meskipun async/menunggu seringkali lebih sederhana, menggunakan generator memberi Anda kemampuan untuk mengontrol aliran asinkron dengan cara yang lebih disesuaikan.

Pertimbangan penting lainnya adalah penanganan kesalahan dalam kode asinkron. Tidak seperti operasi sinkron, kesalahan dalam fungsi asinkron harus diatasi coba/tangkap blok atau dengan menangani janji yang ditolak. Penting untuk selalu menyertakan penanganan kesalahan yang tepat dalam alur kerja asinkron Anda, karena hal ini memastikan bahwa jika satu fungsi dalam rantai gagal, hal ini tidak merusak keseluruhan aplikasi. Menambahkan mekanisme logging ke operasi asinkron juga akan memungkinkan Anda melacak kinerja dan mendiagnosis masalah dalam aliran asinkron yang kompleks.