Wait For Async Function To Finish Javascript Without Await

Wait For Async Function To Finish Javascript Without Await

5 min read Jun 20, 2024
Wait For Async Function To Finish Javascript Without Await

Menunggu Fungsi Asinkron Selesai Tanpa Menggunakan await di JavaScript

Fungsi asinkron dalam JavaScript memungkinkan kita untuk melakukan tugas-tugas yang memakan waktu lama tanpa menghentikan eksekusi kode lain. Namun, terkadang kita perlu memastikan bahwa fungsi asinkron selesai sebelum melanjutkan ke langkah berikutnya dalam program kita.

Meskipun await adalah cara paling umum untuk mencapai ini, ada beberapa metode lain yang bisa digunakan tanpa menggunakan await. Berikut adalah beberapa cara yang bisa Anda gunakan:

1. Callback Function

Salah satu cara paling sederhana adalah menggunakan fungsi callback. Fungsi callback adalah fungsi yang dilewatkan sebagai argumen ke fungsi lain dan dieksekusi setelah fungsi pertama selesai.

function fetchData(url, callback) {
  // Simulasi fetch data
  setTimeout(() => {
    const data = 'Data berhasil didapatkan';
    callback(data);
  }, 1000); // Simulasi waktu tunggu 1 detik
}

fetchData('https://example.com/data', (data) => {
  console.log('Data:', data); // Data: Data berhasil didapatkan
  // Lanjutkan ke langkah berikutnya setelah data berhasil didapatkan
});

Dalam contoh ini, fetchData adalah fungsi asinkron yang mensimulasikan mengambil data dari sebuah URL. Fungsi callback dilewatkan sebagai argumen dan dieksekusi setelah data berhasil didapatkan.

2. Promises dengan then()

Fungsi asinkron seringkali mengembalikan Promises. Kita bisa menggunakan metode then() pada Promise untuk menjalankan fungsi setelah Promise diselesaikan.

function fetchData(url) {
  return new Promise((resolve, reject) => {
    // Simulasi fetch data
    setTimeout(() => {
      const data = 'Data berhasil didapatkan';
      resolve(data);
    }, 1000); // Simulasi waktu tunggu 1 detik
  });
}

fetchData('https://example.com/data')
  .then((data) => {
    console.log('Data:', data); // Data: Data berhasil didapatkan
    // Lanjutkan ke langkah berikutnya setelah data berhasil didapatkan
  })
  .catch((error) => {
    console.error('Error:', error);
  });

Contoh ini serupa dengan contoh sebelumnya, tetapi menggunakan Promise dan metode then() untuk menangani penyelesaian fungsi asinkron.

3. async/await dengan Promise.resolve()

Meskipun judul artikel ini membahas cara menunggu fungsi asinkron tanpa await, kita bisa menggunakan async/await dengan Promise.resolve() sebagai cara untuk menunggu fungsi asinkron menyelesaikan tanpa menggunakan await secara langsung.

async function fetchData(url) {
  return new Promise((resolve, reject) => {
    // Simulasi fetch data
    setTimeout(() => {
      const data = 'Data berhasil didapatkan';
      resolve(data);
    }, 1000); // Simulasi waktu tunggu 1 detik
  });
}

async function main() {
  const data = await Promise.resolve(fetchData('https://example.com/data')); // Menggunakan Promise.resolve() untuk menunggu fetchData selesai
  console.log('Data:', data); // Data: Data berhasil didapatkan
  // Lanjutkan ke langkah berikutnya setelah data berhasil didapatkan
}

main();

Dalam contoh ini, kita menunda eksekusi fungsi main menggunakan async dan menunggu hasil fetchData dengan await tetapi hanya pada Promise.resolve(), bukan pada fetchData secara langsung.

Keuntungan dan Kerugian

Setiap metode memiliki keuntungan dan kerugian:

  • Callback: Mudah dipahami dan digunakan, tetapi dapat menyebabkan kode yang sulit dibaca dan dikelola, terutama ketika ada banyak fungsi callback bertingkat.
  • Promises: Lebih mudah dibaca dan dikelola dibandingkan dengan callback, tetapi membutuhkan pemahaman dasar tentang Promises.
  • async/await dengan Promise.resolve(): Memberikan sintaks yang lebih sederhana daripada then() dan catch() untuk menangani Promise, tetapi masih membutuhkan pemahaman tentang async/await dan Promise.

Pilih metode yang paling cocok untuk proyek Anda berdasarkan kebutuhan dan preferensi coding Anda.