Ví dụ về ngoại lệ với thuộc tính data- trong JavaScript

Giả sử khi trang web tải, máy chủ tạo ra mã HTML, trong đó lưu trữ tên, giá cả và số lượng sản phẩm đã mua:

<div id="product" data-product="táo" data-price="1000" data-amount="5"></div>

Hãy tạo một hàm, hàm này sẽ nhận tham chiếu đến phần tử chứa sản phẩm và tìm tổng chi phí của hàng hóa (giá nhân với số lượng):

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

Hãy tìm chi phí của sản phẩm của chúng ta:

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

alert(cost);

Bây giờ giả sử tình huống sau: do một sự cố nào đó trên máy chủ, nó đã gửi cho chúng ta một sản phẩm mà thiếu giá hoặc số lượng (hoặc cả hai cùng lúc), ví dụ, như thế này:

<div id="product" data-product="táo" data-price="1000"></div>

Nếu bây giờ thử tính chi phí của hàng hóa, thì kết quả hiển thị trên màn hình sẽ là NaN. Bạn sẽ đồng ý rằng, điều này không cung cấp nhiều thông tin.

Vậy là, chúng ta cần phải bảo vệ trước việc thiếu các thuộc tính cần thiết. Điều này có thể được thực hiện bằng hai cách. Cách thứ nhất - đó là coi đây là hành vi bình thường và chỉ đơn giản kiểm tra sự tồn tại của các thuộc tính cần thiết bằng các câu lệnh if:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // trả về một cái gì đó, ví dụ, 0 hoặc null hoặc false
	}
}

Phương án thứ hai - đó là coi việc thiếu thuộc tính data-price hoặc data-amount là một tình huống ngoại lệ. Trong trường hợp này chúng ta sẽ ném ra một ngoại lệ:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'thiếu giá hoặc số lượng của sản phẩm'
		};
	}
}

Phương án nào trong hai phương án ở đây thích hợp hơn để áp dụng - đó là sự lựa chọn của lập trình viên. Anh ta có thể coi vấn đề là hoạt động bình thường của script hoặc là tình huống ngoại lệ.

Giả sử chúng ta quyết định rằng tình huống đó là ngoại lệ. Khi đó, mã lấy chi phí hàng hóa sẽ trông như thế này:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// phản ứng với ngoại lệ bằng cách nào đó
}

Hãy sửa đổi mã của tôi sao cho hàm getCost nem ra hai loại ngoại lệ: nếu thiếu giá và nếu thiếu số lượng. Hãy suy nghĩ kỹ về tên của các ngoại lệ này. Trong khối catch, hãy hiển thị các thông báo lỗi khác nhau cho các loại ngoại lệ khác nhau.