BAB 34 — Advanced Asynchronous Patterns: Menguasai Teknik Async Lanjutan di JavaScript

BAB 34 — Advanced Asynchronous Patterns: Menguasai Teknik Async Lanjutan di JavaScript

JavaScript terkenal dengan sifatnya yang single-threaded, sehingga pemahaman tentang asynchronous programming sangat penting untuk membuat aplikasi responsif dan scalable.

Setelah memahami callback, promise, dan async/await, langkah berikutnya adalah advanced asynchronous patterns yang sering dipakai dalam proyek profesional.

Bab ini membahas generator function, async iterator, observable, throttling/debouncing, dan cancellation token.

1. Generator Function & yield

Generator function adalah fungsi yang dapat dihentikan sementara dan dilanjutkan di titik tertentu menggunakan yield.

function* simpleGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = simpleGenerator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

Manfaat generator:

  • Membuat data stream secara lazy
  • Mengontrol flow asynchronous secara manual
  • Digunakan untuk iterasi besar tanpa menghabiskan memori

2. Async Iterator / for await…of

Async iterator adalah cara untuk mengiterasi data asynchronous, seperti stream atau API yang mengembalikan promise.

async function* asyncNumbers() {
  for (let i = 1; i <= 3; i++) {
    await new Promise(res => setTimeout(res, 1000)); // simulasi async
    yield i;
  }
}

(async () => {
  for await (const num of asyncNumbers()) {
    console.log(num); // 1, 2, 3 (dengan delay 1 detik tiap angka)
  }
})();

Manfaat:

  • Iterasi data asynchronous dengan sintaks mirip loop biasa
  • Mengurangi callback hell
  • Ideal untuk streaming API atau data incremental

3. Observable / RxJS Dasar

Observable adalah pola programming reaktif, memungkinkan mengamati perubahan data atau event.

import { Observable } from 'rxjs';

const obs = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  setTimeout(() => subscriber.next(3), 1000);
  setTimeout(() => subscriber.complete(), 1500);
});

obs.subscribe({
  next: val => console.log(val),
  complete: () => console.log('Done')
});

Manfaat:

  • Mempermudah event-driven programming
  • Digunakan di framework modern seperti Angular
  • Bisa digabung dengan operator map, filter, reduce

4. Throttling & Debouncing Async Tasks

Throttling dan debouncing adalah teknik untuk mengontrol frekuensi eksekusi fungsi, sangat berguna di UI atau event-heavy apps.

a. Debouncing

Menunda eksekusi hingga aktivitas berhenti.

function debounce(fn, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn.apply(this, args), delay);
  };
}

window.addEventListener('resize', debounce(() => {
  console.log('Resize event fired!');
}, 500));

b. Throttling

Membatasi fungsi hanya dijalankan sekali setiap interval tertentu.

function throttle(fn, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  console.log('Scroll event fired!');
}, 1000));

Manfaat:

  • Mengurangi beban CPU & memory
  • Mengoptimalkan performa aplikasi dengan event berat

5. Cancellation Token / Abort Controller

Kadang kita ingin membatalkan operasi async, misalnya fetch API yang sudah tidak dibutuhkan. Gunakan AbortController.

const controller = new AbortController();
const signal = controller.signal;

fetch('https://jsonplaceholder.typicode.com/todos/1', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    }
  });

// Batalkan request setelah 500ms
setTimeout(() => controller.abort(), 500);

Manfaat:

  • Menghindari request tak perlu
  • Meningkatkan performa dan UX
  • Berguna untuk cancellation token patterns di async libraries

Kesimpulan

Bab ini membekali kamu dengan advanced asynchronous patterns yang sering digunakan dalam aplikasi real-world:

  • Generator function & yield → kontrol flow & lazy evaluation
  • Async iterator / for await…of → iterasi data async dengan loop sederhana
  • Observable / RxJS → reactive programming
  • Throttling & debouncing → optimasi event-heavy UI
  • Cancellation token / AbortController → batalkan task async yang tidak perlu

Menguasai pola ini memungkinkan developer membuat aplikasi responsif, efisien, dan scalable, terutama pada proyek real-time, streaming, dan UI interaktif.

Related Posts