Példa kivételkezelésre data- attribútumokkal JavaScriptben

Tegyük fel, hogy az oldal betöltésekor a szerver létrehozza a HTML kódot, amely a termék nevét, árát és a vásárolt mennyiséget tárolja:

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

Készítsünk egy függvényt, amely átveszi a terméket tartalmazó elem referenciáját és megkeresi a termék teljes költségét (ár szorozva a mennyiséggel):

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

Keressük meg a termékünk költségét:

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

alert(cost);

Tegyük fel most a következő helyzetet: valamilyen hiba miatt a szerver olyan terméket küldött, amelyből hiányzik az ár vagy a mennyiség (vagy mindkettő egyszerre), például így:

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

Ha most megpróbáljuk kiszámolni a termék költségét, az eredmény NaN lesz a képernyőn. Egészítsük ki, nem túl informatív.

Kiderült, hogy valahogy meg kell védenünk magunkat attól, hogy a szükséges attribútumok hiányoznak. Ezt két úton tehetjük meg. Az első út - azt mondani, hogy ez normális viselkedés, és egyszerűen ellenőrizni if-ekkel a szükséges attribútumok jelenlétét:

javascriptfunction getCost(elem) {
  if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
    return elem.dataset.price * elem.dataset.amount;
  } else {
    return 0; // adjunk vissza valamit, például 0-t vagy null-t vagy false-t
  }
}

A második lehetőség - azt mondani, hogy a data-price vagy data-amount attribútum hiánya - kivételes helyzet. Ebben az esetben kivételt dobunk:

javascriptfunction getCost(elem) {
  if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
    return elem.dataset.price * elem.dataset.amount;
  } else {
    throw {
      name: 'ProductCostError',
      message: 'hiányzik az ár vagy a mennyiség a termékből'
    };
  }
}

A két lehetőség közül melyik alkalmazása helyénvalóbb itt - az a programozó döntése. Ő dönthet úgy, hogy a probléma a szkript normális működése, vagy kivételes helyzet.

Tegyük fel, hogy úgy döntöttünk, a helyzet kivételes. Ekkor a termék költségének meghatározása így fog kinézni:

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

try {
  let cost = getCost(product);
  alert(cost);
} catch (error) {
  // valahogy reagálunk a kivételre
}