Wie können wir Async/Await verwenden, um Bildabmessungen sicher von einer Callback-basierten Funktion abzurufen?

Versprechen aus Rückrufen mit Async/Await erstellen

Die bereitgestellte Funktion getImageData verwendet Rückrufe, um Bildabmessungen beim Laden abzurufen. Die synchrone Natur von JavaScript kann jedoch zu undefinierten Werten führen, wenn das Bild nicht vollständig geladen ist, bevor auf seine Eigenschaften zugegriffen wird.

Um dies zu beheben, können wir Versprechen und Async/Await nutzen, um die Verfügbarkeit der Breite und zu gewährleisten Höhe, bevor Sie sie verwenden.

Konvertieren des Rückrufs in ein Versprechen

Der erste Schritt besteht darin, die getImageData-Funktion in ein Versprechen umzuwandeln. Dies kann mit dem Promise-Konstruktor erreicht werden:

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

Verwendung von Async/Await

Mit der LoadImage-Funktion als Versprechen können wir async/await verwenden, um sicherzustellen Das Bild wird geladen, bevor auf seine Abmessungen zugegriffen wird:

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

Diese Version gibt ein Versprechen zurück, das erst dann mit den Bildabmessungen aufgelöst wird, wenn das Bild vollständig geladen ist. Die Ready-Funktion kann diese Dimensionen jetzt protokollieren, ohne auf undefinierte Werte zu stoßen.

Das obige ist der detaillierte Inhalt vonWie können wir Async/Await verwenden, um Bildabmessungen sicher von einer Callback-basierten Funktion abzurufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!