⊗jsSpExcDAE 148 of 294 menu

Exemple d'exception avec les attributs data- en JavaScript

Supposons que lors du chargement de la page, le serveur crée un code HTML dans lequel sont stockés le nom, le prix et la quantité du produit acheté :

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

Créons une fonction qui acceptera une référence à l'élément du produit et trouvera le coût total de l'article (le prix multiplié par la quantité) :

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

Trouvons le coût de notre produit :

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

Supposons maintenant la situation suivante : en raison d'une panne quelconque sur le serveur, celui-ci nous a envoyé un produit dans lequel le prix ou la quantité sont absents (ou les deux à la fois), par exemple, comme ceci :

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

Si on essaye maintenant de calculer le coût du produit, le résultat affiché à l'écran sera NaN. Vous conviendrez que ce n'est pas très informatif.

Il apparaît donc que nous devons nous protéger d'une manière ou d'une autre contre l'absence des attributs dont nous avons besoin. Cela peut être fait de deux manières. La première manière consiste à considérer que c'est un comportement normal et à vérifier simplement par des conditions if la présence des attributs nécessaires :

function getCost(elem) { if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) { return elem.dataset.price * elem.dataset.amount; } else { return 0; // retournons quelque chose, par exemple 0 ou null ou false } }

La deuxième option consiste à considérer que l'absence de l'attribut data-price ou data-amount est une situation exceptionnelle. Dans ce cas, nous lèverons une exception :

function getCost(elem) { if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) { return elem.dataset.price * elem.dataset.amount; } else { throw { name: 'ProductCostError', message: 'le prix ou la quantité du produit est manquant' }; } }

Laquelle des deux options est la plus appropriée ici - c'est le choix du programmeur. Il peut considérer le problème comme un fonctionnement normal du script ou comme une situation exceptionnelle.

Supposons que nous ayons décidé que la situation est exceptionnelle. Alors le code pour obtenir le coût de l'article ressemblera à ceci :

let product = document.querySelector('#product'); try { let cost = getCost(product); alert(cost); } catch (error) { // on réagit d'une certaine manière à l'exception }

Modifiez mon code pour que la fonction getCost lève deux types d'exceptions : si le prix est absent et si la quantité est absente. Réfléchissez bien aux noms de ces exceptions. Dans le bloc catch, affichez des messages d'erreur différents pour les exceptions de types différents.

frentrdauzc