Javascript Promises

Pada kesempatan kali ini saya akan sedikit membahas tentang Javascript Promises yang saya kutip dari situs Google Developers tentang web dasar yaitu Javascript Promises: an introduction.

Javascript adalah pemrograman single threaded, yang berarti bahwa 2 bit script tidak dapat dijalankan secara bersamaan, script tersebut harus dijalankan satu demi satu. Di browser javascript membagi thread dengan hal-hal lain yang berbeda dari browser ke browser. Tapi biasanya javascript berada diantrian yang sama seperti painting/pelukisan, memperbarui gaya (CSS) dan penanganan tindakan pengguna (seperti menyoroti teks dan berinteraksi dengan kontrol form). Aktivitas di salah satu hal-hal ini dapat menunda aktivitas lain.

Anda Mungkin telah menggunakan event dan callback untuk hal-hal seperti ini. Berikut adalah contoh event

var img1 = document.querySelector('.img-1');

img1.addEventListener('load', function() {
  // gambar telah dimuat
});

img1.addEventListener('error', function() {
  // gagal
});

Sayangnya pada contoh diatas, ada kemungkinan bahwa event terjadi sebelum kita mulai mendengarkan event tersebut, namun kita dapat mengatasinya menggunakan property "complete" yang ada pada element img.

var img1 = document.querySelector('.img-1');

function loaded() {
  // gambar telah dimuat
}

if (img1.complete) {
  loaded();
}
else {
  img1.addEventListener('load', loaded);
}

img1.addEventListener('error', function() {
  // gagal
});

Cara ini tidak menangkap gambar yang error sebelum kita mendapat kesempatan untuk mendengarkannya; sayangnya DOM tidak memberi kita cara untuk melakukan itu. Juga, ini hanya memuat satu gambar, hal ini akan menjadi lebih rumit jika kita ingin tahu kapan serangkaian gambar telah dimuat.

Event tidak selalu menjadi cara yang terbaik

Event sangat baik untuk hal-hal yang dapat terjadi beberapa kali seperti objek-keyup, touchstart dll Dengan event-event tersebut Anda tidak perlu peduli tentang apa yang terjadi sebelum Anda mulai mendengarkan event. Tapi ketika kita berbicara tentang async keberhasilan / kegagalan, idealnya Anda ingin sesuatu seperti ini:

img1.panggilIniJikaTelahDimuatAtauSaatDimuat(function() {
  // telah dimuat
}).AtauJikaGagalPanggilIni(function() {
  // gagal
});

// and…
ketikaSemuaIniTelahDimuat([img1, img2]).panggilIni(function() {
  // semua telah dimuat
}).atauJikaSalahSatuAtauLebihGagalPanggilIni(function() {
  // salah satu atau lebih gagal
});

Ini adalah apa yang Promises dapat lakukan, tetapi dengan penamaan yang lebih baik. Jika elemen gambar HTML memiliki metode "ready" yang mengembalikan Promise, kita bisa melakukan ini:

img1.ready().then(function() {
  // telah dimuat
}, function() {
  // gagal
});

// dan…
Promise.all([img1.ready(), img2.ready()]).then(function() {
  // semua telah dimuat
}, function() {
  // satu atau lebih gagal
});

Pada dasarnya, Promise mirip seperti event listener namun:

1. Sebuah Promise hanya dapat berhasil atau gagal sekali. Hal ini tidak dapat berhasil atau gagal dua kali, tidak bisa juga beralih dari berhasil ke gagal atau sebaliknya.
2. Jika Promise telah berhasil atau gagal dan nanti Anda menambahkan callback keberhasilan / kegagalan, callback yang benar akan dipanggil, meskipun event telah berlangsung sebelumnya.

Terminologi Promise

Berikut adalah dasar-dasarnya.
Promise dapat:
terpenuhi - Jika tindakan yang berkaitan dengan Promise berhasil
ditolak - Jika tindakan yang berkaitan dengan Promise gagal
tertunda - Apakah belum terpenuhi atau ditolak
menetap - Telah dipenuhi atau ditolak
spesifikasinya juga menggunakan istilah thenable untuk menggambarkan obyek yang seperti Promise, dalam hal ini Promise memiliki metode then.

Referensi Promise API

Semua metode bekerja di Chrome, Opera, Firefox, Microsoft Edge, dan Safari kecuali dinyatakan berbeda. polyfill menyediakan beberapa metode di bawah ini untuk semua brower.

Metode-metode Static

Ringkasan Metode
Promise.resolve(promise)	Pengembalian Promise (hanya jika promise.constructor == Promise)
Promise.resolve(thenable);	Membuat Promise baru dari thenable tersebut. Sebuah thenable adalah Promise yang memiliki metode `then()`.
Promise.resolve(obj);	Membuat Promise yang terpenuhi untuk obj. dalam kasus ini.
Promise.reject(obj);	Membuat Promise yang menolak untuk obj. Untuk konsistensi dan debugging (mis stack trace), obj harus menjadi instanceof Error.
Promise.all(array);	Membuat Promise yang terpenuhi ketika setiap item dalam array terpenuhi, dan menolak jika (dan ketika) item menolak. Setiap item array akan diteruskan ke Promise.resolve, sehingga array dapat menjadi campuran objek Promise dan objek-objek lainnya. Nilai pemenuhan adalah array (dalam urutan) dari nilai pemenuhan. Nilai penolakan adalah nilai penolakan pertama.
Promise.race(array);	Membuat Promise yang terpenuhi setelah salah satu item terpenuhi, atau menolak setelah slah satu item apapun menolak, mana yang terjadi pertama kali.