JavaScript Dasar | #6 Fungsi Asynchronous

pada tanggal


Asynchronous JavaScript

Pengenalan Asynchronous

JavaScript pada dasarnya bersifat single-threaded, yang berarti hanya dapat menjalankan satu tugas pada satu waktu. Namun, dengan asynchronous programming, kita dapat menulis kode yang menunggu (non-blocking) proses tertentu selesai, seperti mengambil data dari API, tanpa menghentikan eksekusi kode lainnya.

Asynchronous sering digunakan saat berhadapan dengan operasi yang memakan waktu lama seperti:

  • Permintaan HTTP (AJAX)
  • Waktu tunggu (timers)
  • Akses ke basis data atau file

Contoh Asynchronous Sederhana:


// Fungsi asynchronous sederhana menggunakan setTimeout
console.log("Mulai");

setTimeout(() => {
  console.log("Proses Asynchronous Selesai");
}, 2000);

console.log("Akhir");

Pada contoh di atas, pesan "Akhir" akan ditampilkan sebelum "Proses Asynchronous Selesai", karena setTimeout bekerja secara asynchronous.

Promises

Promises adalah cara untuk menangani operasi asynchronous dengan lebih terstruktur. Sebuah Promise dapat berada dalam salah satu dari tiga status:

  • Pending: Saat promise masih dalam proses.
  • Fulfilled: Saat promise berhasil diselesaikan.
  • Rejected: Saat promise gagal.

Contoh Promise:


// Contoh promise sederhana
const myPromise = new Promise((resolve, reject) => {
  const success = true; // Ganti dengan logika nyata

  if (success) {
    resolve("Berhasil!");
  } else {
    reject("Gagal.");
  }
});

myPromise
  .then((message) => {
    console.log(message); // Jika berhasil, tampilkan "Berhasil!"
  })
  .catch((error) => {
    console.log(error); // Jika gagal, tampilkan "Gagal."
  });

Promise dengan Operasi Asynchronous (setTimeout):


const asyncOperation = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Operasi Asynchronous Berhasil!");
  }, 2000);
});

asyncOperation.then((message) => {
  console.log(message); // Output setelah 2 detik
});

Async/Await

Async/Await adalah sintaks yang lebih mudah digunakan untuk menangani promises. Dengan async kita bisa menandai sebuah fungsi untuk bekerja asynchronous, dan dengan await kita dapat menunggu hasil dari sebuah promise.

Contoh Async/Await:


// Fungsi asynchronous dengan async/await
async function fetchData() {
  try {
    const result = await asyncOperation;
    console.log(result); // Output setelah promise selesai
  } catch (error) {
    console.log(error);
  }
}

fetchData();

Fetch API untuk AJAX

Fetch API adalah cara modern dan sederhana untuk melakukan permintaan HTTP (AJAX). Fetch API menggunakan promises dan mendukung async/await, yang membuatnya lebih mudah digunakan daripada pendekatan lama seperti XMLHttpRequest.

Contoh Fetch API dengan Promises:


// Mengambil data dari API menggunakan Fetch dan promises
fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error('Error:', error));

Contoh Fetch API dengan Async/Await:


// Mengambil data dari API menggunakan Fetch dengan async/await
async function getPosts() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

getPosts();

Mengirim Data dengan Fetch API (POST Request):


// Mengirim data ke API menggunakan Fetch
async function sendData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        title: 'foo',
        body: 'bar',
        userId: 1
      })
    });
    const data = await response.json();
    console.log('Data Terkirim:', data);
  } catch (error) {
    console.error('Error:', error);
  }
}

sendData();

Fetch API memberikan cara yang lebih sederhana dan efisien untuk melakukan operasi AJAX dibandingkan dengan metode lama. Ini memanfaatkan promise dan dapat diintegrasikan dengan mudah dalam aplikasi asynchronous menggunakan async/await.

Komentar

Posting Komentar