Piemērs izņēmumam ar data- atribūtiem JavaScript

Lai lapas ielādes laikā serveris izveidotu HTML kodu, kurā glabājas nosaukums, cena un iegādātā produkta daudzums:

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

Izveidosim funkciju, kas saņems atsauci uz elementu ar produktu un atradīs preces kopējo vērtību (cenu reizinot ar daudzumu):

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

Atradīsim mūsu produkta izmaksas:

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

alert(cost);

Tagad pieņemsim šādu situāciju: kādas kļūmes dēļ serverī tas nosūtīja mums preci, kurā trūkst cenas vai daudzuma (vai abu uzreiz), piemēram, šādi:

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

Ja tagad mēģināsit aprēķināt preces izmaksas, tad rezultātā ekrānā tiks parādīts NaN. Piekrītat, ne pārāk informatīvi.

Izrādās, mums kaut kā jāpasargājas no tā, ka trūks mums vajadzīgo atribūtu. To var izdarīt divos veidos. Pirmais veids ir teikt, ka tā ir normāla darbība un vienkārši pārbaudīt ar if klauzulām nepieciešamo atribūtu esamību:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // atgriezīsim kaut ko, piemēram, 0 vai null vai false
	}
}

Otrā iespēja ir teikt, ka atribūta data-price vai data-amount trūkums - ir izņēmuma situācija. Šajā gadījumā mēs izmetīsim izņēmumu:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'trūkst cenas vai daudzuma produktam'
		};
	}
}

Kurš no diviem variantiem šeit ir piemērotāks - tas ir programmētāja izvēle. Viņš var uzskatīt problēmu par normālu skripta darbību vai izņēmuma situāciju.

Pieņemsim, ka mēs nolēmām, ka situācija ir ārkārtēja. Tad kods preces izmaksu iegūšanai izskatīsies šādi:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// kā reaģēt uz izņēmumu
}

Pārveidojiet manu kodu tā, lai funkcija getCost izmestu divu veidu izņēmumus: ja trūkst cenas un ja trūkst daudzuma. Labi padomājiet par šo izņēmumu nosaukumiem. Blokā catch attēlojiet dažādus kļūdu ziņojumus dažāda veida izņēmumiem.