Asynchronous OOP di JavaScript: Menggabungkan Promise dan Class

Dalam dunia pengembangan aplikasi modern, JavaScript dikenal karena kemampuannya menjalankan kode asynchronous — yaitu proses yang berjalan di latar belakang tanpa menghentikan eksekusi utama program. Hal ini sangat penting terutama ketika berurusan dengan API, database, atau operasi jaringan yang membutuhkan waktu untuk merespons. Namun, ketika kita menggabungkannya dengan pendekatan Object-Oriented Programming (OOP), muncul tantangan baru: bagaimana mengelola proses asynchronous di dalam class agar tetap rapi, efisien, dan mudah dipahami?

Melalui pendekatan Asynchronous OOP di JavaScript, kita dapat menyatukan kekuatan antara Promise, async/await, dan class-based design untuk membangun sistem yang modular namun tetap mendukung operasi non-blocking. Teknik ini sangat berguna dalam proyek modern seperti aplikasi real-time, REST API client, dan sistem data sinkronisasi yang memerlukan manajemen state kompleks.

Apa Itu Asynchronous OOP di JavaScript?

Asynchronous OOP di JavaScript adalah penerapan konsep pemrograman berorientasi objek yang memanfaatkan fitur asynchronous seperti Promise dan async/await di dalam class. Tujuannya adalah untuk menjaga struktur kode tetap berbasis objek sambil tetap mendukung eksekusi non-blokir yang menjadi kekuatan utama JavaScript.

Dengan konsep ini, metode dalam class dapat menangani proses asynchronous secara efisien, seperti:

• Mengambil data dari API,

• Menyimpan data ke database lokal (IndexedDB),

• Atau melakukan proses komputasi berat tanpa membekukan UI.

Menggunakan Promise di Dalam Class

Sebelum munculnya async/await, cara utama menangani asynchronous adalah menggunakan Promise. Di dalam class, Promise dapat digunakan untuk mengembalikan hasil yang belum langsung tersedia.

Contoh implementasi:

class DataFetcher {
  constructor(url) {
    this.url = url;
  }

  getData() {
    return new Promise((resolve, reject) => {
      fetch(this.url)
        .then(response => {
          if (!response.ok) reject("Gagal mengambil data");
          return response.json();
        })
        .then(data => resolve(data))
        .catch(error => reject(error));
    });
  }
}

// Penggunaan
const api = new DataFetcher("https://jsonplaceholder.typicode.com/posts");
api.getData()
  .then(data => console.log("Data diterima:", data))
  .catch(err => console.error("Error:", err));

Penjelasan:

• Metode getData() mengembalikan sebuah Promise.

• Jika proses fetch berhasil, hasilnya dikirim melalui resolve().

• Jika gagal, akan dikirim ke reject().

• Pemanggilan metode dilakukan menggunakan .then() dan .catch().

Pendekatan ini memberikan struktur yang jelas tetapi sedikit lebih verbose dibanding async/await.

Menggunakan Async/Await di Dalam Class

Dengan ES2017, JavaScript memperkenalkan async/await yang membuat kode asynchronous lebih mudah dibaca. Kamu bisa menulis kode asynchronous di dalam class seolah-olah itu kode sinkron.

Contoh:

class APIService {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
  }

  async fetchData(endpoint) {
    try {
      const response = await fetch(`${this.baseUrl}${endpoint}`);
      if (!response.ok) throw new Error("Gagal mengambil data");
      const data = await response.json();
      return data;
    } catch (error) {
      console.error("Terjadi kesalahan:", error.message);
      throw error;
    }
  }
}

// Penggunaan
(async () => {
  const service = new APIService("https://jsonplaceholder.typicode.com");
  const posts = await service.fetchData("/posts");
  console.log(posts);
})();

Penjelasan:

• Kata kunci async digunakan sebelum deklarasi metode class.

• await menunggu hasil dari Promise tanpa perlu callback chaining.

• Error ditangani menggunakan try...catch, membuat kode lebih bersih.

Dengan async/await, struktur kode dalam class menjadi lebih natural dan mudah di-maintain.

Menggabungkan Polymorphism & Asynchronous

Asynchronous OOP juga bisa digabungkan dengan konsep polymorphism, di mana beberapa class memiliki metode asynchronous dengan nama yang sama tetapi perilaku berbeda.

Contoh:

class DataSource {
  async ambilData() {
    throw new Error("Metode harus diimplementasikan subclass");
  }
}

class APIData extends DataSource {
  async ambilData() {
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    return res.json();
  }
}

class LocalData extends DataSource {
  async ambilData() {
    return Promise.resolve([
      { id: 1, nama: "Andi" },
      { id: 2, nama: "Budi" },
    ]);
  }
}

(async () => {
  const sumber1 = new APIData();
  const sumber2 = new LocalData();

  console.log(await sumber1.ambilData());
  console.log(await sumber2.ambilData());
})();

Penjelasan:

• Kedua subclass (APIData dan LocalData) memiliki metode ambilData(), tetapi implementasinya berbeda.

• Pemanggilan bisa dilakukan dengan cara yang sama, tanpa peduli dari mana sumber datanya.

• Ini contoh nyata polymorphism asynchronous di JavaScript.

Menggunakan Static Method Asynchronous

JavaScript juga mendukung static async method di dalam class, memungkinkan pemanggilan fungsi asynchronous tanpa membuat instance class.

Contoh:

class Utils {
  static async delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  static async hello() {
    await this.delay(1000);
    console.log("Halo, ini dijalankan setelah 1 detik!");
  }
}

(async () => {
  await Utils.hello();
})();

Penjelasan:

• static async digunakan agar fungsi bisa dipanggil langsung dari class.

• Sangat berguna untuk helper function yang tidak tergantung pada data instance.

• await tetap dapat digunakan di dalam static method.

Studi Kasus: Pengelolaan Data Produk Secara Asynchronous

Berikut contoh penerapan Asynchronous OOP di JavaScript dalam sistem e-commerce sederhana.

class ProductService {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
  }

  async getProducts() {
    const res = await fetch(`${this.baseUrl}/products`);
    return res.json();
  }

  async addProduct(product) {
    const res = await fetch(`${this.baseUrl}/products`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(product)
    });
    return res.json();
  }
}

(async () => {
  const service = new ProductService("https://fakestoreapi.com");
  const products = await service.getProducts();
  console.log("Produk:", products);

  const newProduct = { title: "Produk Baru", price: 150000 };
  const result = await service.addProduct(newProduct);
  console.log("Produk ditambahkan:", result);
})();

Penjelasan:

• Menggunakan class untuk modularisasi logika API.

• Operasi asynchronous dilakukan dengan async/await.

• Metode getProducts() dan addProduct() berjalan non-blocking.

Keuntungan Asynchronous OOP di JavaScript

1. Kinerja optimal: Tidak memblokir proses utama.

2. Struktur rapi: Logika asynchronous tetap dalam class terorganisir.

3. Mudah dikelola: Error handling lebih sederhana dengan try...catch.

4. Reusable: Class dapat digunakan ulang di berbagai proyek.

5. Mendukung skala besar: Ideal untuk arsitektur aplikasi modern seperti SPA atau microservices.

Kesimpulan

Penerapan Asynchronous OOP di JavaScript memberikan fleksibilitas dan kekuatan lebih dalam mengelola proses non-blokir dengan struktur berorientasi objek. Dengan menggabungkan Promise, async/await, serta prinsip OOP seperti encapsulation dan polymorphism, kode menjadi lebih bersih, mudah dirawat, dan efisien.

Jika kamu ingin mengembangkan aplikasi modern yang cepat dan modular, maka menguasai Asynchronous OOP di JavaScript adalah langkah penting untuk menuju level profesional dalam pengembangan web modern.