Contoh Pengecualian dengan Atribut data- dalam JavaScript

Apabila halaman dimuatkan, pelayan membuat kod HTML yang menyimpan nama, harga dan kuantiti produk yang dibeli:

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

Mari buat fungsi yang akan menerima rujukan kepada elemen dengan produk dan mencari jumlah kos barang (harga didarab dengan kuantiti):

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

Mari cari kos produk kami:

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

alert(cost);

Sekarang andaikan situasi berikut: disebabkan beberapa kegagalan pada pelayan, ia menghantar kepada kami produk yang tiada harga atau kuantiti (atau kedua-duanya sekali), contohnya, seperti ini:

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

Sekarang jika cuba mengira kos barang, hasilnya akan memaparkan NaN. Anda pasti setuju, ia tidak begitu bermaklumat.

Ini bermakna, kita perlu melindungi diri kita daripada ketiadaan atribut yang kita perlukan. Ini boleh dilakukan dengan dua cara. Cara pertama - dengan mengatakan bahawa ini adalah tingkah laku normal dan hanya periksa kehadiran atribut yang kita perlukan dengan if:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // pulangkan sesuatu, contohnya, 0 atau null atau false
	}
}

Pilihan kedua - dengan mengatakan bahawa ketiadaan atribut data-price atau data-amount - adalah situasi yang luar biasa. Dalam kes ini kita akan membuang pengecualian:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'harga atau kuantiti untuk produk tiada'
		};
	}
}

Manakah antara dua pilihan yang lebih sesuai digunakan di sini - ia adalah pilihan pengaturcara. Dia boleh menganggap masalah itu sebagai kerja normal skrip atau sebagai situasi luar biasa.

Katakan kita memutuskan bahawa situasi itu adalah luar biasa. Kemudian kod untuk mendapatkan kos barang akan kelihatan seperti ini:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// bertindak balas terhadap pengecualian dengan cara tertentu
}

Ubahsuai kod saya supaya fungsi getCost membuang dua jenis pengecualian: jika harga tiada dan jika kuantiti tiada. Fikirkan dengan teliti tentang nama untuk pengecualian ini. Dalam blok catch, paparkan mesej ralat yang berbeza untuk pengecualian jenis yang berbeza.