Promiset synkronisessa tyylissä JavaScriptissä

Ongelman promise hell ratkaisemiseksi kehitettiin erityinen promisien syntaksi, joka mahdollistaa asynkronisen koodin kirjoittamisen paljon helpommin - synkronisessa tyylissä.

Aloitetaan sen opiskeleminen. Aluksi otetaan koodi edellisestä oppitunnista:

function func() {
	getSmth(2).then(res => {
		console.log(res); // tulostaa 4
	});
}

func();

Jos funktiomme getSmth olisi synkroninen, voisimme kirjoittaa funktion func koodin uudelleen seuraavasti:

function func() {
	let res = getSmth(2);
	console.log(res); // tulostaa 4
}

Funktio getSmth on kuitenkin asynkroninen, joten yllä oleva koodi ei toimi. Mutta hyödyntämällä promisien synkronista tyyliä voimme saada aikaan jotain vastaavaa. Tehdään niin.

Aluksi meidän on ilmoitettava funktiomme func asynkroniseksi käyttämällä erityistä komentoa async:

async function func() {
	
}

Tämän jälkeen voimme funktion func sisällä käyttää erityistä komentoa await. Tämä komento, kirjoitettuna ennen promisia, pakottaa JavaScriptin odottamaan, kunnes promis suoritetaan. Tämän jälkeen komento palauttaa promisin tuloksen, ja koodin suoritus jatkuu.

Meidän tapauksessamme meidän on kirjoitettava await ennen getSmth:n kutsua. Koska tämän funktion kutsun tulos on promis, koodin suoritus jatkuu vasta tämän promisin suorittamisen jälkeen. Ja promisin tulos voidaan tallentaa muuttujaan. Tehdään kuten on kuvailtu:

async function func() {
	let res = await getSmth(2);
	console.log(res); // tulostaa 4
}

func();

Kutsutaan getSmth:ä useita kertoja:

async function func() {
	let res1 = await getSmth(2);
	let res2 = await getSmth(3);
	
	console.log(res1 + res2); // tulostaa 13
}

func();

Ja nyt kutsutaan getSmth:ää silmukassa:

async function func() {
	let arr = [1, 2, 3, 4, 5];
	let sum = 0;
	
	for (let elem of arr) {
		sum += await getSmth(elem);
	}
	
	console.log(sum);
}

func();

Kirjoita seuraava koodi uudelleen käyttäen synkronista syntaksia:

function func() {
	getSmth(2).then(res1 => {
		getSmth(3).then(res2 => {
			getSmth(4).then(res3 => {
				console.log(res1 + res2 + res3);
			});
		});
	});
}

func();