Comment pouvons-nous utiliser Async/Await pour récupérer en toute sécurité les dimensions de l'image à partir d'une fonction basée sur le rappel ?

Création de promesses à partir de rappels avec Async/Await

La fonction fournie, getImageData, utilise des rappels pour récupérer les dimensions de l'image lors du chargement. Cependant, la nature synchrone de JavaScript peut entraîner des valeurs non définies si l'image n'est pas complètement chargée avant d'accéder à ses propriétés.

Pour résoudre ce problème, nous pouvons exploiter les promesses et async/await pour garantir la disponibilité de la largeur et height avant de les utiliser.

Conversion du rappel en promesse

La première étape consiste à convertir la fonction getImageData en promesse. Ceci peut être réalisé en utilisant le constructeur Promise :

<code class="javascript">function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', reject); // Handle errors
    img.src = url;
  });
}</code>

Utilisation d'Async/Await

Avec la fonction loadImage comme promesse, nous pouvons utiliser async/await pour garantir l'image est chargée avant d'accéder à ses dimensions :

<code class="javascript">async function getImageData(url) {
  const img = await loadImage(url);
  return { width: img.naturalWidth, height: img.naturalHeight };
}
async function ready() {
  console.log(await getImageData(this.url))
}</code>

Cette version renvoie une promesse qui se résout avec les dimensions de l'image uniquement lorsque l'image a fini de se charger. La fonction ready peut désormais enregistrer ces dimensions sans rencontrer de valeurs non définies.

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!