Eksempel på unntak med data-attributter i JavaScript

La oss si at når siden lastes, genererer serveren HTML-kode som lagrer navnet, prisen og mengden av det kjøpte produktet:

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

La oss lage en funksjon som tar en referanse til et element med et produkt og finner den totale varekostnaden (pris multiplisert med mengde):

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

La oss finne kostnaden for produktet vårt:

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

alert(cost);

La oss nå anta følgende situasjon: på grunn av en feil på serveren, sendte den oss et produkt der prisen eller mengden mangler (eller begge deler), for eksempel slik:

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

Hvis vi nå prøver å beregne kostnaden for produktet, vil resultatet vise NaN på skjermen. Enig, ikke veldig informativt.

Det betyr at vi på en måte må beskytte oss selv mot at de nødvendige attributtene mangler. Dette kan gjøres på to måter. Den første måten er å si at dette er normalt atferd og bare sjekke tilstedeværelsen av de nødvendige attributtene med if-setninger:

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

Det andre alternativet er å si at fraværet av attributtene data-price eller data-amount er en unntakssituasjon. I dette tilfellet vil vi kaste et unntak:

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

Hvilket av de to alternativene som er mest passende å bruke her - er et valg programmereren må ta. Han/Hun kan vurdere problemet som en normal del av skriptets funksjon eller som en unntakssituasjon.

La oss si at vi bestemte oss for at situasjonen er en unntakssituasjon. Da vil koden for å hente varekostnaden se slik ut:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// reagere på unntaket på en eller annen måte
}

Endre koden min slik at funksjonen getCost kaster to typer unntak: hvis prisen mangler og hvis mengden mangler. Tenk godt over navnene på disse unntakene. I catch-blokken, vis forskjellige feilmeldinger for ulike typer unntak.