Comment puis-je convertir une fonction de rappel en promesse en utilisant async/await en JavaScript ?

Conversion d'une fonction de rappel en promesse avec async/await

En JavaScript, la possibilité de retarder l'exécution du code jusqu'à ce que certains événements se produisent est une exigence courante. Lorsque vous travaillez avec du code asynchrone, les rappels constituent l'approche traditionnelle en JavaScript, mais les promesses offrent une manière plus concise et flexible de gérer les opérations asynchrones. Les promesses permettent d'enchaîner et d'attendre des opérations, simplifiant le code asynchrone et améliorant la lisibilité.

Problème

Considérez la fonction suivante qui récupère une image à partir d'une URL, la charge et renvoie sa largeur et height :

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

En utilisant cette fonction comme rappel, nous pouvons rencontrer des problèmes lorsque nous tentons d'accéder immédiatement aux données de l'image. Par exemple, si nous utilisons la fonction comme suit :

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

La fonction getImageData s'exécute immédiatement, mais l'image n'a peut-être pas fini de se charger, ce qui entraîne une sortie indéfinie. Pour surmonter ce problème, nous pouvons exploiter les promesses et async/await pour garantir que les données de l'image ne sont récupérées qu'une fois l'image chargée avec succès.

Solution

Au lieu de nous fier aux rappels, nous pouvons convertir getImageData en une fonction basée sur des promesses :

<code class="js">function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', reject); // Don't forget to handle errors
    img.src = url;
  });
}</code>

Maintenant, nous pouvons utiliser async/await pour récupérer les données d'image uniquement lorsqu'elles deviennent disponibles :

<code class="js">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>

En utilisant des promesses et async/await, nous pouvons garantir que les données de l'image ne sont accessibles qu'une fois l'image chargée, offrant ainsi une approche plus robuste et plus propre de la gestion des opérations asynchrones.

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!