Példa kivételkezelésre data- attribútumokkal JavaScriptben

Tegyük fel, hogy az oldal betöltésekor a szerver létrehozza a HTML kódot, amely a termék nevét, árát és a vásárolt mennyiséget tárolja:

<div id="product" data-product="alma" data-price="1000" data-amount="5"></div>

Készítsünk egy függvényt, amely átveszi a terméket tartalmazó elem referenciáját és megkeresi a termék teljes költségét (ár szorozva a mennyiséggel):

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

Keressük meg a termékünk költségét:

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

alert(cost);

Tegyük fel most a következő helyzetet: valamilyen hiba miatt a szerver olyan terméket küldött, amelyből hiányzik az ár vagy a mennyiség (vagy mindkettő egyszerre), például így:

<div id="product" data-product="alma" data-price="1000"></div>

Ha most megpróbáljuk kiszámolni a termék költségét, az eredmény NaN lesz a képernyőn. Egészítsük ki, nem túl informatív.

Kiderült, hogy valahogy meg kell védenünk magunkat attól, hogy a szükséges attribútumok hiányoznak. Ezt két úton tehetjük meg. Az első út - azt mondani, hogy ez normális viselkedés, és egyszerűen ellenőrizni if-ekkel a szükséges attribútumok jelenlétét:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // adjunk vissza valamit, például 0-t vagy null-t vagy false-t
	}
}

A második lehetőség - azt mondani, hogy a data-price vagy data-amount attribútum hiánya - kivételes helyzet. Ebben az esetben kivételt dobunk:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'hiányzik az ár vagy a mennyiség a termékből'
		};
	}
}

A két lehetőség közül melyik alkalmazása helyénvalóbb itt - az a programozó döntése. Ő dönthet úgy, hogy a probléma a szkript normális működése, vagy kivételes helyzet.

Tegyük fel, hogy úgy döntöttünk, a helyzet kivételes. Ekkor a termék költségének meghatározása így fog kinézni:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// valahogy reagálunk a kivételre
}

Alakítsa át a kódomat úgy, hogy a getCost függvény két típusú kivételt dobjon: ha hiányzik az ár, és ha hiányzik a mennyiség. Gondolja át jól ezen kivételek neveit. A catch blokkban jelenítsen meg különböző hibaüzeneteket a különböző típusú kivételekhez.