Wie konvertiere ich Rückrufe zum Laden von Bildern mithilfe von async/await in Versprechen?

Rückrufe mit async/await in Versprechen umwandeln

Rückrufe bieten eine praktische Möglichkeit, asynchronen Code zu verarbeiten. Die Verwendung von Versprechen mit async/await kann jedoch Vorteile hinsichtlich der Lesbarkeit und Wartbarkeit des Codes bieten. Diese Frage befasst sich mit der Herausforderung, eine Callback-Funktion, die die Breite und Höhe eines Bildes lädt, in eine Promise-basierte Implementierung umzuwandeln.

Problem und Lösung

Die bereitgestellte Callback-Funktion getImageData gibt die natürliche Breite zurück und Höhe eines Bildes, wenn der Ladevorgang abgeschlossen ist. Bei asynchronem Aufruf jedoch wie im Beispiel gezeigt:

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

Der zurückgegebene Wert ist undefiniert, da der Rückruf sofort ausgeführt wird, während das Laden des Bildes einige Zeit dauert. Um dies zu umgehen, können wir den Promise-Konstruktor verwenden, um ein Versprechen zu erstellen, das aufgelöst wird, sobald das Bild geladen ist. Hier ist die aktualisierte getImageData-Funktion als Versprechen:

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;
  });
}

Mit dieser auf Versprechen basierenden Funktion können wir jetzt async/await verwenden, um die Ausführung von getImageData zu verzögern und die tatsächliche Breite und Höhe des geladenen Bildes zu erhalten:

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

Dieser Code stellt sicher, dass die Konsolenprotokollierung erst erfolgt, nachdem das Bild vollständig geladen wurde und seine Breite und Höhe verfügbar sind.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich Rückrufe zum Laden von Bildern mithilfe von async/await in Versprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!