📛 Async Programming

Panduan lengkap Async Programming di JavaScript untuk pengembangan web modern

📌 Elements

💡 Dasar Async Programming

Async Programming adalah cara untuk menangani operasi yang membutuhkan waktu, seperti fetching data atau membaca file, tanpa memblokir eksekusi kode lainnya.

async-basics.js
// Callback
function fetchData(callback) {
  setTimeout(() => {
    callback('Data fetched!');
  }, 1000);
}

// Promise
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched with Promise!');
    }, 1000);
  });
}

// Async/Await
async function fetchDataAsync() {
  const data = await fetchDataPromise();
  console.log(data);
}

📝 Penjelasan Detail:

â€ĸ Callback - Fungsi yang dipanggil setelah operasi selesai
â€ĸ Promise - Objek yang merepresentasikan hasil (atau kegagalan) dari operasi async
â€ĸ Async/Await - Sintaks modern untuk menangani Promise dengan cara yang lebih bersih dan mudah dibaca

🛠ī¸ Features

async-features.js
// Error Handling with Promises
fetchDataPromise()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

// Error Handling with Async/Await
async function fetchDataWithErrorHandling() {
  try {
    const data = await fetchDataPromise();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

ℹī¸ Browser Support

Async/Await didukung penuh oleh semua browser modern (Chrome 55+, Firefox 52+, Safari 10.1+, Edge 15+).

📊 Basic Tables

async-tables.js
// Comparison of Async Methods
Callback           /* Simple but can lead to "callback hell" */
Promise           /* Better than callbacks, but can be verbose */
Async/Await       /* Clean and easy to read, modern approach */

// Common Patterns
Promise.all       /* Run multiple promises in parallel */
Promise.race       /* Resolve/reject as soon as one promise settles */
Promise.allSettled /* Wait for all promises to settle */

📝 Penjelasan Detail:

â€ĸ Callback - Cocok untuk operasi sederhana, tetapi dapat menyebabkan "callback hell"
â€ĸ Promise - Lebih baik daripada callback, tetapi bisa menjadi verbose
â€ĸ Async/Await - Pendekatan modern yang bersih dan mudah dibaca

🚀 Advanced Table

async-advanced.js
// Using Promise.all
const [data1, data2] = await Promise.all([
  fetchDataPromise(),
  fetchAnotherDataPromise()
]);

// Using Promise.race
const winner = await Promise.race([
  fetchDataPromise(),
  fetchAnotherDataPromise()
]);

// Using Promise.allSettled
const results = await Promise.allSettled([
  fetchDataPromise(),
  fetchAnotherDataPromise()
]);

ℹī¸ Browser Support

Promise.all, Promise.race, dan Promise.allSettled didukung penuh oleh semua browser modern (Chrome 32+, Firefox 29+, Safari 8+, Edge 12+).

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan Async/Await untuk kode yang lebih bersih dan mudah dibaca, dan selalu tangani error dengan try/catch.

async-tips.js
// ✅ Good - Clean and readable
async function fetchUserData() {
  try {
    const user = await fetchUser();
    const posts = await fetchPosts(user.id);
    console.log(posts);
  } catch (error) {
    console.error(error);
  }
}

// ❌ Avoid - Nested Promises
fetchUser()
  .then(user => {
    fetchPosts(user.id)
      .then(posts => {
        console.log(posts);
      })
      .catch(error => {
        console.error(error);
      });
  })
  .catch(error => {
    console.error(error);
  });

📝 Penjelasan Detail:

â€ĸ Keep it simple - Gunakan Async/Await untuk kode yang lebih bersih
â€ĸ Avoid nested promises - Hindari "callback hell" dengan Async/Await
â€ĸ Error handling - Selalu tangani error dengan try/catch
â€ĸ Parallel execution - Gunakan Promise.all untuk menjalankan beberapa operasi async secara paralel