L’objet Promise promesse est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur voire jamais.
JavaScript Promise est un nouvel objet ajouté à ECMAscript 6 qui vise à fournir un moyen propre et intuitif de gérer l’achèvement (ou l’échec) de tâches asynchrones.
L’objet prend deux paramètres : une méthode resolve() qui est appelée lorsque la promesse est accomplie avec le statut fulfilled, et reject() pour la définir comme rejetée avec le statut rejected. Un objet Promise démarre avec un état en attente pending, pour indiquer que le code asynchrone n’est ni terminé fullfilled, ni échoué rejected. On peut alors appeler une methode then() pour finir le traitement en cas de succès et une méthode catch() en cas d’echec.
On va voir cela pour connaître la largeur et la hauteur d’une image dont ont connaît l’url. On définit une fonction imgSize() qui retourne un objet Promise que l’on chaîne à la méthode then pour afficher la taille de l’image que l’on met dans un tableau json { width: ..., height: ...}.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const imgSize = src => { return new Promise((resolve, reject) => { const img = new Image(); img.src = src; img.onload = () => { const { width, height } = img; const size = { width: width, height: height }; resolve(size); } img.onerror = () => { const err = "Erreur, entrez une URL correcte"; reject(err); } }) } |
On appelle ensuite la méthode then() pour afficher la largeur et la hauteur de l’image. En cas d’erreur, on peut l’afficher avec la méthode catch().
|
1 2 3 4 5 6 |
imgSize(url).then(size => { console.log(JSON.stringify(size)); }) .catch(err => { console.log(err); }); |
|
1 |
{"width":642,"height":510} |
Essayez avec l’url : https://murviel-info-beziers.com/wp-content/uploads/2020/07/promise-700x438.jpg.
L’url est :
La largeur de l’image est :
La hauteur de l’image est :
Et hop, un moyen simple de gérer les traitements asynchrones.
