Παράδειγμα εξαίρεσης με data- attributes σε JavaScript

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

<div id="product" data-product="μήλο" data-price="1000" data-amount="5"></div>

Ας φτιάξουμε μια συνάρτηση που θα δέχεται μια αναφορά στο στοιχείο με το προϊόν και θα βρίσκει το συνολικό κόστος του αγαθού (τιμή πολλαπλασιασμένη με την ποσότητα):

function getCost(elem) {
	return elem.dataset.price * elem.dataset.amount;
}

Ας βρούμε το κόστος του προϊόντος μας:

let product = document.querySelector('#product');
let cost = getCost(product);

alert(cost);

Ας υποθέσουμε τώρα την ακόλουθη κατάσταση: λόγω κάποιας βλάβης στον server, αυτός μας έστειλε ένα προϊόν στο οποίο απουσιάζει η τιμή ή η ποσότητα (ή και τα δύο ταυτόχρονα), για example, έτσι:

<div id="product" data-product="μήλο" data-price="1000"></div>

Εάν τώρα προσπαθήσουμε να υπολογίσουμε το κόστος του προϊόντος, το αποτέλεσμα που θα εμφανιστεί στην οθόνη θα είναι NaN. Συμφωνείτε, δεν είναι πολύ ενημερωτικό.

Αποδεικνύεται ότι πρέπει με κάποιο τρόπο να προστατευτούμε από την απουσία των απαραίτητων attributes. Αυτό μπορεί να γίνει με δύο τρόπους. Ο πρώτος τρόπος είναι να πούμε ότι αυτή είναι μια φυσιολογική συμπεριφορά και απλά να ελέγχουμε με if την ύπαρξη των απαραίτητων attributes:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // επιστρέφουμε κάτι, για παράδειγμα, 0 ή null ή false
	}
}

Η δεύτερη επιλογή - είναι να πούμε ότι η απουσία του attribute data-price ή data-amount - είναι μια εξαιρετική κατάσταση. Σε αυτή την περίπτωση θα ρίχνουμε μια εξαίρεση:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'απουσιάζει η τιμή ή η ποσότητα του προϊόντος'
		};
	}
}

Ποια από τις δύο επιλογές είναι πιο κατάλληλη εδώ - αυτή είναι επιλογή του προγραμματιστή. Μπορεί να θεωρήσει το πρόβλημα φυσιολογική λειτουργία του script ή εξαιρετική κατάσταση.

Ας υποθέσουμε ότι αποφασίσαμε ότι η κατάσταση είναι εξαιρετική. Τότε ο κώδικας λήψης του κόστους του προϊόντος θα μοιάζει κάπως έτσι:

let product = document.querySelector('#product');

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// αντιδρούμε με κάποιο τρόπο στην εξαίρεση
}

Μετατρέψτε τον κώδικά μου έτσι, ώστε η συνάρτηση getCost να ρίχνει δύο τύπους εξαιρέσεων: εάν απουσιάζει η τιμή και εάν απουσιάζει η ποσότητα. Σκεφτείτε καλά τα ονόματα αυτών των εξαιρέσεων. Στο block catch εμφανίστε διαφορετικά μηνύματα σφάλματος για εξαιρέσεις διαφορετικών τύπων.