Eksempel på undtagelse med data-attributter i JavaScript

Lad os antage, at når siden indlæses, genererer serveren HTML-kode, som gemmer navnet, prisen og mængden af det købte produkt:

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

Lad os lave en funktion, som tager en reference til produkt-elementet og finder den samlede omkostning for varen (pris ganget med mængde):

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

Lad os finde omkostningen for vores produkt:

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

alert(cost);

Antag nu følgende situation: på grund af en fejl på serveren sendte den os et produkt, hvor prisen eller mængden mangler (eller begge dele), for eksempel sådan her:

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

Hvis vi nu prøver at beregne omkostningen for varen, vil resultatet vise NaN på skærmen. Enig, ikke særlig informativt.

Det betyder, at vi på en eller anden måde skal beskytte os selv mod, at de nødvendige attributter mangler. Dette kan gøres på to måder. Den første måde er at sige, at det er normalt adfærd og simpelthen kontrollere tilstedeværelsen af de nødvendige attributter med if-statements:

javascriptfunction getCost(elem) {
  if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
    return elem.dataset.price * elem.dataset.amount;
  } else {
    return 0; // returner noget, for eksempel 0 eller null eller false
  }
}

Den anden mulighed er at sige, at fraværet af attributten data-price eller data-amount er en undtagelsessituation. I dette tilfælde vil vi kaste en undtagelse:

javascriptfunction getCost(elem) {
  if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
    return elem.dataset.price * elem.dataset.amount;
  } else {
    throw {
      name: 'ProductCostError',
      message: 'manglende pris eller mængde for produktet'
    };
  }
}

Hvilken af de to muligheder der er mest passende at anvende her - er et valg programmøren skal tage. De kan betragte problemet som en normal del af scriptets funktion eller som en undtagelsessituation.

Lad os sige, at vi besluttede, at situationen er undtagelsesfuld. Så vil koden for at få varens omkostning se sådan ud:

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

try {
  let cost = getCost(product);
  alert(cost);
} catch (error) {
  // reager på undtagelsen på en eller anden måde
}