Comment convertir les rappels de chargement d'image en promesses à l'aide de async/await ?

Conversion des rappels en promesses à l'aide de async/await

Les rappels offrent un moyen pratique de gérer le code asynchrone. Cependant, l'utilisation de promesses avec async/await peut offrir des avantages en termes de lisibilité et de maintenabilité du code. Cette question aborde le défi de la conversion d'une fonction de rappel qui charge la largeur et la hauteur d'une image en une implémentation basée sur des promesses.

Problème et solution

La fonction de rappel fournie, getImageData, renvoie la largeur naturelle et la hauteur d'une image une fois son chargement terminé. Cependant, lorsqu'elle est invoquée de manière asynchrone comme indiqué dans l'exemple :

ready () {
  console.log(getImageData(this.url))
}

La valeur renvoyée n'est pas définie car le rappel est exécuté immédiatement, tandis que l'image prend un certain temps à se charger. Pour surmonter ce problème, nous pouvons utiliser le constructeur Promise pour créer une promesse qui se résout une fois l'image chargée. Voici la fonction getImageData mise à jour en guise de promesse :

function getImageData(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => {
      resolve({ width: img.naturalWidth, height: img.naturalHeight });
    });
    img.addEventListener('error', reject); // Handle errors here
    img.src = url;
  });
}

Avec cette fonction basée sur une promesse, nous pouvons désormais utiliser async/await pour retarder l'exécution de getImageData et obtenir la largeur et la hauteur réelles de l'image chargée :

async function ready() {
  const imageData = await getImageData(this.url);
  console.log(imageData);
}

Ce code garantit que la journalisation de la console n'a lieu qu'une fois l'image complètement chargée et que sa largeur et sa hauteur sont disponibles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!