Wie kann ich eine Callback-Funktion mit async/await in JavaScript in ein Promise umwandeln?

Konvertieren einer Callback-Funktion in Promise mit async/await

In JavaScript ist die Möglichkeit, die Ausführung von Code zu verzögern, bis bestimmte Ereignisse eintreten, eine häufige Anforderung. Bei der Arbeit mit asynchronem Code sind Rückrufe der traditionelle Ansatz in JavaScript, aber Versprechen bieten eine präzisere und flexiblere Möglichkeit, asynchrone Vorgänge zu handhaben. Versprechen machen es möglich, Vorgänge zu verketten und abzuwarten, wodurch asynchroner Code vereinfacht und die Lesbarkeit verbessert wird.

Problem

Betrachten Sie die folgende Funktion, die ein Bild von einer URL abruft, es lädt und seine Breite und zurückgibt 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>

Bei Verwendung dieser Funktion als Rückruf können beim Versuch, sofort auf die Bilddaten zuzugreifen, Probleme auftreten. Wenn wir die Funktion beispielsweise wie folgt verwenden:

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

Die Funktion getImageData wird sofort ausgeführt, aber das Bild wurde möglicherweise noch nicht vollständig geladen, was zu einer undefinierten Ausgabe führt. Um dieses Problem zu lösen, können wir Versprechen und Async/Await nutzen, um sicherzustellen, dass die Bilddaten erst abgerufen werden, nachdem das Bild erfolgreich geladen wurde.

Lösung

Anstatt uns auf Rückrufe zu verlassen, können wir dies tun getImageData in eine auf Versprechen basierende Funktion umwandeln:

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

Jetzt können wir async/await verwenden, um die Bilddaten nur dann abzurufen, wenn sie verfügbar sind:

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

Durch die Verwendung von Versprechen und async/await können wir sicherstellen, dass die Bilddaten erst zugänglich sind, nachdem das Bild geladen wurde, was einen robusteren und saubereren Ansatz für die Handhabung asynchroner Vorgänge bietet.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Callback-Funktion mit async/await in JavaScript in ein Promise umwandeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!