Pengenalan kepada Promise dalam JavaScript

Anda sudah tahu bahwa penggunaan model callback untuk asinkronitas mudah membawa kepada situasi callback hell. Oleh sebab itu, satu model baru diperkenalkan dalam JavaScript yang dipanggil promise (promise). Mari kita pelajari model ini.

Promise mewakili satu objek, di mana sebuah fungsi dihantar sebagai parameter, dan di dalamnya kita perlu meletakkan kod asinkron kita:

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

Seperti yang anda lihat, saya merekod objek dengan promise ke dalam pembolehubah promise. Di tempat lain dalam kod, saya boleh gunakan pembolehubah ini dengan kaedah then, dengan menghantar fungsi yang mengandungi kod, yang perlu dilaksanakan setelah kod asinkron selesai, yang ditulis ketika mencipta promise ini:

promise.then(function() {
	// akan dilaksanakan apabila kod asinkron selesai
});

Kedengaran mengelirukan, jadi mari kita lihat melalui contoh. Katakan saya ada kod asinkron seperti berikut:

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

Katakan saya ingin menyelesaikan masalah utama asinkronitas untuknya: melaksanakan beberapa kod setelah pemasa dicetuskan. Pada masa yang sama, saya tidak mahu meletakkan kod tersebut dalam pemasa itu sendiri dan saya mahu hasil tersebut, yang saya tulis dalam pembolehubah result, sampai ke dalam kod itu. Sebenarnya, kami telah menyelesaikan masalah ini dalam pelajaran sebelumnya melalui callback dan langganan. Mari kita lihat sekarang, bagaimana untuk melakukannya melalui promise.

Pertama, kita perlu membungkus kod asinkron kita dalam promise:

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

Walau bagaimanapun, ini tidak mencukupi. Kita harus dengan jelas menyatakan bahawa kod asinkron kita telah selesai. Untuk ini, kita dibantu oleh fungsi penyelesaian khas, yang secara automatik sampai ke parameter pertama fungsi, jika dinyatakan:

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

Dengan menggunakan fungsi penyelesaian, kita boleh secara jelas memberitahu promise bahawa kod asinkron telah selesai. Untuk ini, kita mesti memanggil fungsi tersebut di tempat yang kita kehendaki:

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

Pada masa yang sama, jika kita ingin menghantar sebarang hasil kod asinkron ke luar, kita boleh menghantarnya sebagai parameter kepada fungsi penyelesaian kita:

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

Sudah tentu, kita boleh menghapuskan pembolehubah perantaraan:

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

Sekarang di mana-mana tempat lain, kita boleh memanggil kaedah then promise kita:

promise.then(function() {
	// akan dicetuskan apabila promise selesai
});

Hasil pelaksanaan promise akan sampai ke parameter pertama fungsi, jika kita mahu menentukannya:

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

Buat satu promise, di dalamnya ada kelewatan selama 5 saat, selepas itu promise harus selesai, dengan mengembalikan sebarang teks sebagai hasilnya. Paparkan teks ini pada skrin.