Javascript Dasar #9: Asynchronous JavaScript & Promises

Author Hilya Zea
25 Dec 2024
Javascript
Javascript Dasar #9: Asynchronous JavaScript & Promises

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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Daftar Posting</title>
</head>
<body>
  <h1>Daftar Postingan</h1>
  <ul id="postList"></ul>

  <script src="script.js"></script>
</body>
</html>

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 <ul> 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!

Tutorial Terkait Lainnya

Javascript Dasar #10: Error Handling
Javascript Dasar #10: Error Handling

Halo, teman-teman! Di tutorial kali ini, kita akan membahas tentang Error Handling dan Debugging di ...

Baca Tutorial
Javascript Dasar #6: Array & Manipulasi Data
Javascript Dasar #6: Array & Manipulasi Data

Hai, apa kabar? Kembali lagi di tutorial JavaScript! Di tutorial kali ini, kita akan belajar tentang...

Baca Tutorial
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya

Halo, kembali lagi! Kali ini kita akan membahas tentang Objek di JavaScript. Objek adalah tipe data ...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Javascript Dasar #7: Objek (Objects) dan Cara Penggunaannya
Javascript Dasar #10: Error Handling
Javascript Dasar #4: Pengkondisian (If, Else, dan Switch)
Javascript Dasar #2: Variabel, Tipe Data, dan Operator
Tutorial Terbaru
Python Dasar #10: Modul dan library
26 Dec 2024 Python
Python Dasar #9: Penggunaan File
26 Dec 2024 Python
Python Dasar #8: Exception Handling
26 Dec 2024 Python
Python Dasar #7: conditional Python
26 Dec 2024 Python
Python Dasar #6: List dan Dictionary di Python
26 Dec 2024 Python