Exempel på undantag med data-attribut i JavaScript

Låt servern när sidan laddas skapa HTML-kod där namnet, priset och kvantiteten av den köpta produkten lagras:

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

Låt oss skapa en funktion som tar en referens till elementet med produkten och beräknar den totala kostnaden för varan (priset multiplicerat med kvantiteten):

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

Låt oss hitta kostnaden för vår produkt:

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

alert(cost);

Antag nu följande situation: på grund av något fel på servern skickade den till oss en produkt som saknar pris eller kvantitet (eller båda på en gång), till exempel så här:

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

Om vi nu försöker beräkna kostnaden för varan, kommer resultatet att bli NaN. Håller du inte med om att det är mindre informativt?

Det betyder att vi på något sätt måste skydda oss från att de nödvändiga attributen saknas. Detta kan göras på två sätt. Det första sättet är att säga att det är normalt beteende och helt enkelt kontrollera närvaron av de attribut vi behöver med if-satsar:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // returnera något, till exempel 0 eller null eller false
	}
}

Det andra alternativet är att säga att avsaknaden av attributet data-price eller data-amount är ett undantagstillstånd. I det här fallet kommer vi att kasta ett undantag:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'pris eller kvantitet saknas för produkten'
		};
	}
}

Vilket av de två alternativen som är lämpligare att använda här - är programmerarens val. Hen kan betrakta problemet som ett normalt beteende för skriptet eller som ett undantagstillstånd.

Låt oss säga att vi bestämde oss för att situationen är exceptionell. Då kommer koden för att få varans kostnad att se ut så här:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// reagera på något sätt på undantaget
}

Ändra min kod så att funktionen getCost kastar två typer av undantag: om priset saknas och om kvantiteten saknas. Tänk noga på namnen på dessa undantag. I catch-blocket, visa olika felmeddelanden för olika typer av undantag.