Eksempel på undtagelse med data-attributter i JavaScript

Lad os antage, at når siden indlæses, genererer serveren HTML-kode, som gemmer navnet, prisen og mængden af det købte produkt:

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

Lad os lave en funktion, som tager en reference til produkt-elementet og finder den samlede omkostning for varen (pris ganget med mængde):

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

Lad os finde omkostningen for vores produkt:

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

alert(cost);

Antag nu følgende situation: på grund af en fejl på serveren sendte den os et produkt, hvor prisen eller mængden mangler (eller begge dele), for eksempel sådan her:

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

Hvis vi nu prøver at beregne omkostningen for varen, vil resultatet vise NaN på skærmen. Enig, ikke særlig informativt.

Det betyder, at vi på en eller anden måde skal beskytte os selv mod, at de nødvendige attributter mangler. Dette kan gøres på to måder. Den første måde er at sige, at det er normalt adfærd og simpelthen kontrollere tilstedeværelsen af de nødvendige attributter med if-statements:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // returner noget, for eksempel 0 eller null eller false
	}
}

Den anden mulighed er at sige, at fraværet af attributten data-price eller data-amount er en undtagelsessituation. I dette tilfælde vil vi kaste en undtagelse:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'manglende pris eller mængde for produktet'
		};
	}
}

Hvilken af de to muligheder der er mest passende at anvende her - er et valg programmøren skal tage. De kan betragte problemet som en normal del af scriptets funktion eller som en undtagelsessituation.

Lad os sige, at vi besluttede, at situationen er undtagelsesfuld. Så vil koden for at få varens omkostning se sådan ud:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// reager på undtagelsen på en eller anden måde
}

Omdan min kode, så funktionen getCost kaster to typer undtagelser: hvis prisen mangler og hvis mængden mangler. Tænk godt over navnene på disse undtagelser. I blokken catch skal du vise forskellige fejlmeddelelser for undtagelser af forskellige typer.