Comment Async/Await peut-il être utilisé pour convertir une fonction de chargement d'image basée sur un rappel en une approche basée sur des promesses pour un accès synchrone aux données d'image ?

Utilisation d'Async/Await pour convertir un rappel en promesse

En JavaScript, la fonction suivante récupère les données d'image à partir d'une URL :

<code class="javascript">function getImageData(url) {
  const img = new Image();
  img.addEventListener('load', function() {
    return { width: this.naturalWidth, height: this.naturalHeight };
  });
  img.src = url;
}</code>

Cette fonction utilise une approche de rappel, mais elle présente une limitation lors de la tentative d'accès aux données d'image de manière synchrone. Si vous deviez invoquer getImageData dans la méthode ready comme suit :

<code class="javascript">ready() {
  console.log(getImageData(this.url));
}</code>

vous obtiendriez undefined puisque l'image ne serait pas encore chargée. Par conséquent, il devient nécessaire d'utiliser des techniques asynchrones pour gérer l'opération de chargement de l'image avant d'accéder aux données de l'image.

Pour y parvenir, vous pouvez exploiter le constructeur Promise comme suit :

<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 error cases as well
    img.src = url;
  });
}</code>

Maintenant , vous pouvez utiliser async/await pour attendre la promesse loadImage et récupérer ensuite les données de l'image :

<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>

Dans cette implémentation modifiée, async/await garantit que le code s'arrête jusqu'à ce que la promesse loadImage soit résolue, garantissant ainsi que les données d'image sont disponibles au moment de l'enregistrement.

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!