Advance JavaScript 19 - promise

Advance JavaScript 19 - promise


Apa itu Promise?
Promise adalah sebuah objek yang mewakili nilai yang mungkin akan tersedia di masa depan, baik itu berhasil atau gagal. Ini memungkinkan kita untuk menangani operasi asinkron dengan cara yang lebih terstruktur dan mudah dibaca.

Struktur Promise:

Promise memiliki tiga kondisi:

1.Pending: Kondisi awal saat Promise sedang menunggu hasil.

2.Fulfilled: Kondisi di mana operasi berhasil dan nilai yang dijanjikan telah tersedia.

3.Rejected: Kondisi di mana operasi gagal dan nilai yang dijanjikan tidak dapat diberikan.

Cara Membuat Promise:
javascript


const myPromise = new Promise((resolve, reject) => {
  // Lakukan operasi asinkron di sini
  if (/* operasi berhasil */) {
    resolve("Nilai yang dijanjikan");
  } else {
    reject("Alasan penolakan");
  }
});
```

Cara Menggunakan Promise:

javascript


myPromise
  .then((result) => {
    // Menangani ketika Promise berhasil (Fulfilled)
    console.log("Berhasil:", result);
  })
  .catch((error) => {
    // Menangani ketika Promise gagal (Rejected)
    console.error("Gagal:", error);
  });
```

Contoh Penggunaan Nyata:

javascript


// Contoh fungsi yang mengembalikan Promise untuk mengambil data dari server
function fetchDataFromServer() {
  return new Promise((resolve, reject) => {
    // Simulasi pengambilan data dari server dengan menggunakan setTimeout
    setTimeout(() => {
      const data = "Data yang diperoleh dari server";
      resolve(data);
    }, 2000); // Simulasi waktu pengambilan data selama 2 detik
  });
}

// Menggunakan Promise untuk mengambil data dari server dan menangani hasilnya
console.log("Memulai pengambilan data...");
fetchDataFromServer()
  .then((data) => {
    console.log("Data berhasil diperoleh:", data);
  })
  .catch((error) => {
    console.error("Terjadi kesalahan:", error);
  });
```

Dalam contoh ini, `fetchDataFromServer` adalah sebuah fungsi yang mengembalikan Promise. Ketika fungsi tersebut dipanggil, ia akan melakukan operasi asinkron (simulasi pengambilan data dari server) dan kemudian mengembalikan nilai yang dijanjikan. Kemudian, kita menggunakan `.then` untuk menangani ketika Promise berhasil (nilai yang dijanjikan berhasil diperoleh) dan `.catch` untuk menangani ketika Promise gagal (nilai yang dijanjikan tidak dapat diperoleh).

Promise.all



1. Pengertian Promise All:
   - Promise All adalah sebuah metode dalam pemrograman JavaScript yang digunakan untuk mengeksekusi beberapa janji (promises) secara simultan dan menunggu sampai semua janji tersebut selesai atau terjadi kesalahan sebelum melanjutkan eksekusi kode.

2. Cara Menggunakan Promise All:
   - Menggunakan Promise.all() method dengan menyediakan array dari janji-janji yang ingin dieksekusi secara simultan.

   Contoh:
     javascript


     const promise1 = new Promise((resolve, reject) => {
       setTimeout(() => {
         resolve('Janji pertama selesai');
       }, 2000);
     });

     const promise2 = new Promise((resolve, reject) => {
       setTimeout(() => {
         resolve('Janji kedua selesai');
       }, 3000);
     });

     Promise.all([promise1, promise2])
       .then((results) => {
         console.log(results[0]); // Output: Janji pertama selesai
         console.log(results[1]); // Output: Janji kedua selesai
       })
       .catch((error) => {
         console.log(error);
       });
     ```

3. Keuntungan Menggunakan Promise All:
   - Memungkinkan eksekusi kode secara simultan, meningkatkan efisiensi dan kinerja aplikasi.
   - Memudahkan penanganan berbagai janji secara terstruktur.

4. Hal yang Perlu Diperhatikan:
   - Jika salah satu janji mengalami kesalahan (rejection), Promise All akan menghentikan eksekusi dan langsung memasuki blok catch.
   - Pastikan untuk menangani kesalahan (error handling) dengan baik.

Dengan memahami konsep dan cara penggunaan Promise All serta memperhatikan hal-hal yang perlu diperhatikan, Anda dapat meningkatkan kualitas dan efisiensi kode JavaScript Anda.

Ok sekian penjelasan tentang promise

Komentar

Postingan populer dari blog ini

ethical hacking part 14 membuat malware Trojan

CSS layouting - box model: CSS reset

ethical hacking part 3 reconnaissance & information gethering