Wie können Sie mithilfe von async/await in JavaScript eine Callback-basierte Funktion in eine Promise-basierte Funktion konvertieren?

Umwandeln eines Rückrufs in ein Versprechen mithilfe von Async/Await

In JavaScript sind Rückrufe ein gängiger Ansatz zur Handhabung asynchroner Vorgänge. Allerdings kann die Verwendung von Rückrufen zu Code führen, der schwer zu lesen und zu warten ist. Async/await ist eine neuere Funktion, die eine einfachere Möglichkeit bietet, mit asynchronem Code zu arbeiten.

Einer der Hauptvorteile von async/await ist die Möglichkeit, die Ausführung einer Funktion anzuhalten, bis ein Versprechen aufgelöst wird. Dadurch können Sie Code schreiben, der einfacher zu lesen und zu warten ist, insbesondere wenn es um mehrere asynchrone Vorgänge geht.

Problemstellung

Betrachten Sie die folgende Funktion, die die Dimensionen abruft eines Bildes von einer bestimmten URL mithilfe eines Rückrufs:

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

Dieser Code kann jedoch problematisch sein, wenn Sie die Bilddaten sofort abrufen müssen. Wenn Sie die getImageData-Funktion wie folgt aufrufen würden:

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

Sie würden undefiniert werden, da das Bild zum Zeitpunkt der Rückrufausführung noch nicht geladen ist.

Mit Async/ Warten

Um dieses Problem zu lösen, können Sie async/await verwenden, um die getImageData-Funktion in ein Versprechen umzuwandeln. So würden Sie es machen:

<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 gracefully
    img.src = url;
  });
}

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>

In diesem neu geschriebenen Code erstellen wir zunächst eine LoadImage-Funktion, die ein Versprechen zurückgibt. Dieses Versprechen wird aufgelöst, wenn das Bild vollständig geladen ist, oder abgelehnt, wenn ein Fehler auftritt.

Als nächstes erstellen wir eine getImageData-Funktion, die mit async/await darauf wartet, dass das von LoadImage zurückgegebene Versprechen aufgelöst wird, bevor die Bildabmessungen zurückgegeben werden.

Schließlich können wir die getImageData-Funktion aus der Ready-Funktion mit async/await aufrufen. Dadurch wird sichergestellt, dass die Ready-Funktion die Bildabmessungen erst protokolliert, nachdem das Bild geladen wurde.

Durch die Verwendung von async/await können Sie Code, der asynchrone Vorgänge beinhaltet, vereinfachen und das Lesen und Warten erleichtern.

Das obige ist der detaillierte Inhalt vonWie können Sie mithilfe von async/await in JavaScript eine Callback-basierte Funktion in eine Promise-basierte Funktion konvertieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!