Pengenalan Promise dalam JavaScript

Anda sudah tahu bahwa penggunaan model asinkronitas callback mudah mengarah ke situasi callback hell. Oleh karena itu, diperkenalkan model baru dalam JavaScript yang disebut promise (promise). Mari kita pelajari model ini.

Promise merepresentasikan sebuah objek, yang ke dalamnya sebuah fungsi diteruskan sebagai parameter, di dalamnya kita perlu menempatkan kode asinkron kita:

let promise = new Promise(function() {
	// kode asinkron
});

Seperti yang Anda lihat, saya mencatat objek dengan promise ke dalam variabel promise. Di suatu tempat lain dalam kode, saya dapat menerapkan metode then pada variabel ini, dengan meneruskan sebuah fungsi yang berisi kode, yang harus dieksekusi setelah penyelesaian kode asinkron, yang ditulis saat pembuatan promise ini:

promise.then(function() {
	// akan dieksekusi ketika kode asinkron selesai
});

Terdengar membingungkan, jadi mari kita lihat contohnya. Misalkan saya memiliki kode asinkron seperti ini:

setTimeout(function() {
	let result = [1, 2, 3, 4, 5];
}, 3000);

Misalkan saya ingin menyelesaikan untuknya tugas utama asinkronitas kita: mengeksekusi beberapa kode setelah timer terpicu. Pada saat yang sama, saya tidak ingin menempatkan kode ini di dalam timer itu sendiri dan saya ingin agar ke dalam kode ini entah bagaimana hasilnya, yang saya tulis dalam variabel result, dapat masuk. Secara umum, kita telah menyelesaikan tugas ini dalam pelajaran-pelajaran sebelumnya melalui callback dan subscription. Mari sekarang kita lihat bagaimana melakukannya dengan promise.

Pertama-tama, kita perlu membungkus kode asinkron kita ke dalam sebuah promise:

let promise = new Promise(function() {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
	}, 3000);
});

Namun, ini belum cukup. Kita harus secara eksplisit menunjukkan bahwa kode asinkron kita telah selesai. Dalam hal ini, kita dibantu oleh sebuah fungsi penyelesaian khusus, yang secara otomatis masuk ke parameter pertama fungsi, jika parameter tersebut ditentukan:

let promise = new Promise(function(resolve) { // tentukan parameter
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
	}, 3000);
});

Dengan menggunakan fungsi penyelesaian, kita dapat secara eksplisit menunjukkan kepada promise bahwa kode asinkron telah selesai. Untuk itu, kita harus memanggil fungsi ini di tempat yang kita inginkan:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
		resolve(); // menyelesaikan promise
	}, 3000);
});

Pada saat yang sama, jika kita ingin meneruskan suatu hasil dari kode asinkron ke luar, kita dapat meneruskannya sebagai parameter ke fungsi penyelesaian kita:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		let result = [1, 2, 3, 4, 5];
		resolve(result); // meneruskan hasil
	}, 3000);
});

Tentu saja, kita dapat menghilangkan variabel perantara:

let promise = new Promise(function(resolve) {
	setTimeout(function() {
		resolve([1, 2, 3, 4, 5]);
	}, 3000);
});

Sekarang di tempat lain mana pun, kita dapat memanggil metode then dari promise kita:

promise.then(function() {
	// akan terpicu ketika promise selesai
});

Hasil kerja promise akan masuk ke parameter pertama fungsi, jika kita ingin menentukannya:

promise.then(function(result) {
	console.log(result); // akan menampilkan array dengan hasil
});

Buat sebuah promise, di dalamnya akan ada penundaan selama 5 detik, setelah itu promise harus selesai, dengan mengembalikan suatu teks sebagai hasilnya. Tampilkan teks ini di layar.