Why Your Async Await Code Is Actually Blocking Everything Mengapa Kode Async Await Anda Justru Memblokir Semuanya

Anda merefaktor callback hell menjadi sintaks async/await yang indah. Kode Anda terlihat lebih bersih. Bisa dibaca dari atas ke bawah seperti kode synchronous.

Dan sekarang respons API Anda 3x lebih lambat dari sebelumnya.

Inilah fakta yang tidak nyaman: async/await tidak secara ajaib membuat kode Anda concurrent. Ini membuat kode asynchronous terlihat synchronous, tapi kebanyakan developer secara tidak sengaja menulisnya dengan cara yang benar-benar synchronous.

Saya akan tunjukkan kesalahan persis yang membuat Anda kehilangan ratusan milidetik di setiap request.

Jebakan Sequential yang Dialami Semua Orang

Lihat kode yang tampak innocent ini:

async function getUserData(userId) {
  const user = await fetchUser(userId);
  const posts = await fetchPosts(userId);
  const comments = await fetchComments(userId);
  
  return { user, posts, comments };
}

Bersih, mudah dibaca, mudah diikuti. Dan menyakitkan lambatnya.

Setiap keyword await menghentikan eksekusi sampai promise tersebut selesai. Kode Anda benar-benar menunggu fetchUser() selesai sebelum bahkan memulai fetchPosts().

Jika setiap fetch memakan waktu 200ms, total waktu eksekusi Anda adalah 600ms. Tapi ini dia masalahnya: operasi-operasi ini tidak bergantung satu sama lain. Mereka bisa berjalan secara paralel.

Apa yang Sebenarnya Dilakukan Async Await

Sintaks async/await adalah syntactic sugar di atas Promise. Ketika Anda menulis await, Anda memberitahu JavaScript: "jeda eksekusi fungsi ini sampai promise ini selesai."

Jeda itulah masalahnya.

Di balik layar, fungsi Anda tersuspensi di setiap titik await. Event loop bisa mengerjakan hal lain, ya, tapi fungsi Anda terjebak menunggu. Baris berikutnya tidak akan dieksekusi sampai promise saat ini selesai.

Ini persis seperti kode blocking synchronous, hanya dengan sintaks yang lebih bagus.

Pattern Promise.all yang Seharusnya Anda Gunakan

Inilah perbaikan yang tidak pernah dipelajari kebanyakan developer:

async function getUserData(userId) {
  const [user, posts, comments] = await Promise.all([
    fetchUser(userId),
    fetchPosts(userId),
    fetchComments(userId)
  ]);
  
  return { user, posts, comments };
}

Sekarang ketiga fetch dimulai secara bersamaan. Total waktu eksekusi? Hanya 200ms—waktu operasi paling lambat.

Anda baru saja membuat kode Anda 3x lebih cepat dengan perubahan satu baris.

Kapan Sequential Benar-Benar Masuk Akal

Tidak setiap operasi async harus berjalan paralel. Kadang Anda perlu eksekusi sequential:

async function processOrder(orderId) {
  const order = await fetchOrder(orderId);
  const validation = await validateInventory(order.items);
  const payment = await processPayment(order.total);
  
  return payment;
}

Setiap langkah bergantung pada yang sebelumnya. Ini adalah kode async sequential yang benar.

Aturannya: jika operasi B membutuhkan data dari operasi A, gunakan await sequential. Jika mereka independen, gunakan Promise.all().

Kesalahan Halus dalam Loop

Yang ini bahkan menjebak developer berpengalaman:

async function processUsers(userIds) {
  const results = [];
  
  for (const id of userIds) {
    const data = await fetchUserData(id);
    results.push(data);
  }
  
  return results;
}

Terlihat wajar. Berjalan sangat buruk.

Dengan 10 user dan 200ms per fetch, ini memakan waktu 2 detik penuh. Ini memproses satu user, menunggu, memproses yang berikutnya, menunggu lagi.

Versi paralel:

async function processUsers(userIds) {
  const promises = userIds.map(id => fetchUserData(id));
  return await Promise.all(promises);
}

10 user yang sama, 200ms per fetch yang sama, tapi sekarang memakan waktu 200ms total. Semua fetch berjalan concurrent.

Pattern Advanced: Promise.allSettled untuk Error Handling

Promise.all() punya satu kelemahan fatal: jika ada promise yang reject, seluruh operasi langsung gagal. Promise lain ditinggalkan.

Untuk operasi di mana Anda ingin hasil meskipun ada yang gagal:

async function fetchMultipleAPIs(urls) {
  const results = await Promise.allSettled(
    urls.map(url => fetch(url).then(r => r.json()))
  );
  
  return results.map((result, index) => ({
    url: urls[index],
    status: result.status,
    data: result.status === 'fulfilled' ? result.value : null,
    error: result.status === 'rejected' ? result.reason : null
  }));
}

Setiap fetch berjalan paralel. Kegagalan tidak menghancurkan seluruh operasi. Anda mendapat kembali semua hasil dengan status sukses/gagal mereka.

Matriks Performa: Sequential vs Parallel

Mengontrol Concurrency: Pattern Rate Limiting

Kadang Anda butuh paralelisme tapi dengan batasan. Mungkin database Anda hanya bisa menangani 5 koneksi concurrent, atau API punya rate limit.

Inilah pattern production-ready:

async function processWithLimit(items, limit, asyncFn) {
  const results = [];
  const executing = [];
  
  for (const item of items) {
    const promise = Promise.resolve().then(() => asyncFn(item));
    results.push(promise);
    
    if (limit <= items.length) {
      const executingPromise = promise.then(() =>
        executing.splice(executing.indexOf(executingPromise), 1)
      );
      executing.push(executingPromise);
      
      if (executing.length >= limit) {
        await Promise.race(executing);
      }
    }
  }
  
  return Promise.all(results);
}

// Penggunaan: proses 100 item dengan maks 5 operasi concurrent
await processWithLimit(userIds, 5, fetchUserData);

Ini mempertahankan tepat 5 operasi concurrent setiap saat. Begitu satu selesai, yang berikutnya dimulai.

Real World Debugging: Menemukan Bottleneck Anda

Bagaimana Anda mengidentifikasi bottleneck sequential di kode yang ada?

Tambahkan timing log:

async function getUserData(userId) {
  console.time('total');
  
  console.time('fetchUser');
  const user = await fetchUser(userId);
  console.timeEnd('fetchUser');
  
  console.time('fetchPosts');
  const posts = await fetchPosts(userId);
  console.timeEnd('fetchPosts');
  
  console.time('fetchComments');
  const comments = await fetchComments(userId);
  console.timeEnd('fetchComments');
  
  console.timeEnd('total');
  
  return { user, posts, comments };
}

Jika waktu total Anda sama dengan jumlah operasi individual, Anda punya masalah sequential. Seharusnya lebih dekat ke operasi tunggal terlama.

Jebakan await dalam Conditional

Pattern halus ini menyebabkan eksekusi sequential ketika Anda tidak mengharapkannya:

async function smartFetch(useCache) {
  let data;
  
  if (useCache) {
    data = await fetchFromCache();
  } else {
    data = await fetchFromAPI();
  }
  
  const processed = await processData(data);
  return processed;
}

Terlihat baik-baik saja. Tapi bagaimana jika Anda butuh cache dan API untuk perbandingan?

// Salah: sequential
async function compareData() {
  const cached = await fetchFromCache();
  const fresh = await fetchFromAPI();
  return { cached, fresh };
}

// Benar: parallel
async function compareData() {
  const [cached, fresh] = await Promise.all([
    fetchFromCache(),
    fetchFromAPI()
  ]);
  return { cached, fresh };
}

Implikasi Memory dari Operasi Parallel

Paralelisme tidak gratis. Menjalankan 1000 query database secara bersamaan akan membanjiri connection pool Anda dan kemungkinan crash aplikasi Anda.

Pedoman untuk paralelisme yang aman:

• HTTP request: 10-50 concurrent request biasanya aman
• Query database: Sesuaikan dengan ukuran connection pool Anda (biasanya 10-20)
• Operasi file: Tergantung kapasitas I/O, mulai dengan 5-10
• Task CPU-intensive: Sesuaikan jumlah core CPU

Gunakan pattern rate limiting di atas ketika Anda perlu memproses batch besar.

Pattern Promise.any untuk Redundansi

Ketika Anda punya beberapa sumber untuk data yang sama dan ingin respons tercepat:

async function fetchFromFastestSource(userId) {
  try {
    const user = await Promise.any([
      fetchFromPrimaryDB(userId),
      fetchFromReplicaDB(userId),
      fetchFromCache(userId)
    ]);
    
    return user;
  } catch (errors) {
    // Semua sumber gagal
    throw new Error('All data sources unavailable');
  }
}

Ketiga fetch dimulai secara bersamaan. Yang pertama berhasil menang. Yang lain diabaikan.

Tips Praktis untuk Kode Async Production

1. Tambahkan timeout untuk mencegah hanging:

function withTimeout(promise, ms) {
  return Promise.race([
    promise,
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('Timeout')), ms)
    )
  ]);
}

const data = await withTimeout(fetchData(), 5000);

2. Gunakan Promise.allSettled untuk operasi batch:

Anda mendapat visibilitas ke setiap hasil, sukses atau gagal. Jauh lebih mudah di-debug daripada menangkap error dari Promise.all.

3. Hindari awaiting di array method:

// Salah: sequential
const results = [];
items.forEach(async item => {
  const result = await process(item);
  results.push(result);
});

// Benar: parallel
const results = await Promise.all(
  items.map(item => process(item))
);

4. Chain promise bila memungkinkan:

// Kurang optimal
const user = await fetchUser(id);
const enriched = await enrichUserData(user);
return enriched;

// Lebih baik
return fetchUser(id)
  .then(enrichUserData);

5. Eksplisit tentang error handling:

const results = await Promise.allSettled(operations);
const failures = results.filter(r => r.status === 'rejected');

if (failures.length > results.length / 2) {
  throw new Error('Too many failures');
}

Kesimpulan Utama

Kode async/await Anda hanya se-concurrent yang Anda desain. Sintaksnya tidak membuat operasi paralel—Anda harus secara eksplisit memilih paralelisme.

Gunakan await sequential ketika operasi bergantung satu sama lain. Gunakan Promise.all() ketika tidak.

Waspadai loop. Mereka adalah tempat paling umum di mana developer secara tidak sengaja membuat bottleneck sequential.

Tambahkan timing log ke critical path Anda. Jika angkanya tidak cocok, Anda telah menemukan bottleneck Anda.

Perbedaan antara kode async sequential dan parallel bisa menjadi peningkatan performa 10x tanpa perubahan infrastruktur sama sekali. Hanya organisasi kode yang lebih baik.

User Anda tidak akan memperhatikan sintaks yang lebih bersih. Mereka akan memperhatikan waktu loading yang lebih cepat.