Promises σε Συγχρονικό Στυλ στο JavaScript

Για την επίλυση του προβλήματος του promise hell επινοήθηκε μια ειδική σύνταξη για τα promises, που επιτρέπει τη γραφή ασύγχρονου κώδικα πολύ πιο εύκολα - σε συγχρονικό στυλ.

Ας προχωρήσουμε στη μελέτη της. Αρχικά, ας πάρουμε τον κώδικα από το προηγούμενο μάθημα:

function func() {
	getSmth(2).then(res => {
		console.log(res); // θα εμφανίσει 4
	});
}

func();

Αν η συνάρτησή μας getSmth ήταν σύγχρονη, τότε τον κώδικα της συνάρτησης func θα μπορούσαμε να τον ξαναγράψουμε ως εξής:

function func() {
	let res = getSmth(2);
	console.log(res); // θα εμφανίσει 4
}

Η συνάρτηση getSmth, ωστόσο, είναι ασύγχρονη, επομένως ο παραπάνω κώδικας δεν θα λειτουργήσει. Αλλά, χρησιμοποιώντας το συγχρονικό στυλ των promises, μπορούμε να πετύχουμε κάτι παρόμοιο. Ας το κάνουμε.

Αρχικά, πρέπει να δηλώσουμε τη συνάρτησή μας func ως ασύγχρονη χρησιμοποιώντας την ειδική εντολή async:

async function func() {
	
}

Μετά από αυτό, θα μπορούμε μέσα στη συνάρτηση func να χρησιμοποιήσουμε την ειδική εντολή await. Αυτή η εντολή, όταν γράφεται πριν από ένα promise, θα αναγκάσει το JavaScript να περιμένει μέχρι το promise να εκπληρωθεί. Μετά από αυτό, η εντολή θα επιστρέψει το αποτέλεσμα του promise, και η εκτέλεση του κώδικα θα συνεχιστεί.

Στην περίπτωσή μας, πρέπει να γράψουμε await πριν από την κλήση της getSmth. Εφόσον το αποτέλεσμα της κλήσης αυτής της συνάρτησης θα είναι ένα promise, η περαιτέρω εκτέλεση του κώδικα θα συνεχιστεί μόνο μετά την εκπλήρωση αυτού του promise. Και, το αποτέλεσμα του promise μπορεί να αποθηκευτεί σε μια μεταβλητή. Ας κάνουμε όπως περιγράφηκε:

async function func() {
	let res = await getSmth(2);
	console.log(res); // θα εμφανίσει 4
}

func();

Ας καλέσουμε την getSmth αρκετές φορές:

async function func() {
	let res1 = await getSmth(2);
	let res2 = await getSmth(3);
	
	console.log(res1 + res2); // θα εμφανίσει 13
}

func();

Και τώρα ας καλούμε την getSmth σε έναν βρόχο:

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();

Ξαναγράψτε τον ακόλουθο κώδικα χρησιμοποιώντας τη συγχρονική σύνταξη:

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

func();