Inleiding tot beloftes in JavaScript

Jy weet reeds dat die gebruik van die terugroepmodel van asynchroniciteit maklik tot 'n situasie van callback hell lei. Daarom is 'n nuwe model bekendgestel in JavaScript genaamd beloftes (promise). Kom ons bestudeer hierdie model.

'n Belofte verteenwoordig 'n voorwerp waarin 'n funksie as parameter oorgedra word, binne-in wat ons ons asinchrone kode moet plaas:

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

Soos jy kan sien, het ek die voorwerp met die belofte in die veranderlike promise geskryf. Op 'n ander plek in die kode kan ek op hierdie veranderlike die metode then toepas, deur daaraan 'n funksie oor te dra met die kode wat uitgevoer moet word na voltooiing van die asinchrone kode wat geskryf is tydens die skepping van hierdie belofte:

promise.then(function() {
	// sal uitvoer wanneer die asinchrone kode voltooi is
});

Dit klink verwarrend, so kom ons kyk na 'n voorbeeld. Laat ek die volgende asinchrone kode hê:

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

Laat ek vir dit ons hoof asinchrone taak wil oplos: om 'n sekere kode uit te voer nadat die tydsberekening afgeloop het. Terselfdertyd wil ek nie hierdie kode binne die tydsberekening self plaas nie en wil ek dat die resultaat, wat ek in die veranderlike result geskryf het, op een of ander manier in hierdie kode beland. In elk geval, ons het hierdie taak in vorige lesse opgelos deur terugroepe en inskrywings. Kom ons nou kyk hoe om dit met beloftes te doen.

Eerstens moet ons ons asinchrone kode in 'n belofte toedraai:

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

Dit is egter nie genoeg nie. Ons moet eksplisiet aandui dat ons asinchrone kode voltooi is. 'n Spesiale voltooiingsfunksie sal ons hierin help, outomaties wat in die eerste parameter van die funksie beland, as dit gespesifiseer is:

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

Met behulp van die voltooiingsfunksie kan ons eksplisiet aan die belofte aandui dat die asinchrone kode voltooi is. Om dit te doen, moet ons hierdie funksie in die gewenste plek oproep:

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

Terselfdertyd, as ons 'n sekere resultaat van die asinchrone kode na buite wil oordra, kan ons dit as parameter aan ons voltooiingsfunksie oordra:

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

Ons kan natuurlik ook van die tussentydse veranderlike ontslae raak:

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

Nou kan ons op enige ander plek die metode then van ons belofte oproep:

promise.then(function() {
	// sal aktiveer wanneer die belofte voltooi is
});

Die resultaat van die belofte sal in die eerste parameter van die funksie beland, as ons dit wil spesifiseer:

promise.then(function(result) {
	console.log(result); // sal die array met die resultaat uitdruk
});

Skep 'n belofte, binne-in wat 'n vertraging van 5 sekondes sal wees, waarna die belofte moet voltooi word, en as sy resultaat moet dit 'n sekere teks teruggee. Druk hierdie teks op die skerm uit.