Halo, teman-teman! Sekarang kita akan masuk ke topik yang sangat penting dalam JavaScript: Asynchronous Programming. Di dunia nyata, banyak hal yang berjalan secara asynchronous (tidak bersamaan), seperti meminta data dari server atau membaca file. JavaScript memiliki cara untuk menangani operasi ini tanpa membuat aplikasi kamu "terhenti" atau "terjeda" sementara menunggu proses tersebut selesai. Di sini, kita akan belajar tentang Promises dan cara kerja asynchronous di JavaScript.

Apa Itu Asynchronous?

Asynchronous berarti bahwa suatu proses dapat berjalan di latar belakang sementara program utama tetap berjalan. Sebagai contoh, saat kamu mengambil data dari server, JavaScript tidak perlu menunggu respons dari server untuk menjalankan bagian lain dari kode. Setelah server memberikan respons, JavaScript akan melanjutkan eksekusi kode yang menunggu data tersebut.

Apa Itu Promise?

Promise adalah objek yang mewakili nilai yang mungkin belum tersedia pada saat eksekusi kode, tetapi akan tersedia di masa depan (misalnya, setelah operasi asynchronous selesai). Promises digunakan untuk menangani operasi asynchronous dengan cara yang lebih terstruktur dan mudah dibaca.

Menyusun Promise

Sebuah Promise dapat berada dalam salah satu dari tiga status:

1. Pending: Promise sedang diproses.
2. Fulfilled: Promise selesai dan menghasilkan nilai.
3. Rejected: Promise gagal dan menghasilkan alasan kegagalan.

Berikut contoh dasar Promise:

let myPromise = new Promise(function(resolve, reject) {
  let sukses = true; // Ganti dengan kondisi sesuai kebutuhan

  if (sukses) {
    resolve("Operasi berhasil!");
  } else {
    reject("Operasi gagal.");
  }
});

myPromise.then(function(result) {
  console.log(result); // Output: Operasi berhasil!
}).catch(function(error) {
  console.log(error); // Output: Operasi gagal.
});

Pada contoh ini:

• resolve() dipanggil ketika operasi berhasil.
• reject() dipanggil ketika operasi gagal.
• then() menangani hasil yang dikembalikan ketika Promise sukses.
• catch() menangani kesalahan jika Promise gagal.

Menggunakan Promise dengan API (Contoh Nyata)

Misalnya, kamu ingin mengambil data dari server menggunakan fetch API (yang mengembalikan Promise). Berikut cara penggunaannya:

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(function(response) {
    return response.json(); // Mengonversi response ke format JSON
  })
  .then(function(data) {
    console.log(data); // Menampilkan data yang didapat dari server
  })
  .catch(function(error) {
    console.log("Terjadi kesalahan: " + error);
  });

Pada contoh ini:

• fetch() digunakan untuk mengambil data dari server, yang mengembalikan Promise.
• then() digunakan untuk menangani data yang diterima (dalam format JSON).
• catch() digunakan untuk menangani error yang mungkin terjadi selama proses.

Menggunakan Async/Await

Seiring berjalannya waktu, JavaScript memperkenalkan sintaks async/await untuk membuat kode asynchronous lebih mudah dibaca. async mengubah fungsi menjadi asynchronous, dan await digunakan untuk menunggu Promise diselesaikan sebelum melanjutkan eksekusi kode.

Berikut contoh menggunakan async/await:

async function ambilData() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts");
    let data = await response.json();
    console.log(data); // Menampilkan data yang didapat dari server
  } catch (error) {
    console.log("Terjadi kesalahan: " + error);
  }
}

ambilData();

Pada contoh ini:

• async di depan fungsi menandakan bahwa fungsi ini asynchronous.
• await digunakan untuk menunggu hasil dari fetch() dan response.json().
• Dengan menggunakan try/catch, kita dapat menangani error yang terjadi saat mengambil data.

Studi Kasus: Mengambil Data dari API dan Menampilkannya

Note : Kalian bisa mempraktekannya di CodeLab dari code80vity

Sekarang, mari kita buat aplikasi yang menampilkan daftar posting dari sebuah API.

HTML-nya:

  
  
  


  
Daftar Postingan
  


  

JavaScript-nya (di file script.js):

async function tampilkanPost() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts");
    let posts = await response.json();

    let postList = document.getElementById("postList");
    posts.forEach(post => {
      let listItem = document.createElement("li");
      listItem.textContent = post.title;
      postList.appendChild(listItem);
    });
  } catch (error) {
    console.log("Terjadi kesalahan: " + error);
  }
}

tampilkanPost();

Penjelasan:

• Fungsi tampilkanPost() mengambil data dari API menggunakan fetch dan menampilkan daftar judul posting ke dalam elemen
  di halaman.
  • Dengan async/await, kode menjadi lebih bersih dan mudah dipahami dibandingkan dengan menggunakan then() dan catch().

  ---

  Dengan memahami cara kerja asynchronous di JavaScript dan penggunaan Promises serta async/await, kamu bisa menangani operasi yang memerlukan waktu lama tanpa membuat aplikasi kamu terhenti. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial JavaScript selanjutnya di www.code80vity.com. Semoga dengan memahami konsep ini, aplikasi web yang kamu buat bisa lebih interaktif dan efisien!